@xjur-ui/react 2.0.0 → 2.1.0

package/src/components/select.tsx

@@ -1,318 +0,0 @@
-import { createContext, useContext, type ComponentProps } from 'react'
-import * as RadixPopover from '@radix-ui/react-popover'
-import { tv, twMerge } from '@xjur-ui/util'
-import {
-  ListContent,
-  ListItem,
-  ListRoot,
-  ListHeader,
-  ListHeaderTitle
-} from './list'
-import {
-  SearchInputContent,
-  SearchInputText,
-  SearchInputRoot,
-  SearchInputSlot
-} from './search-input'
-import { Icon } from './icon'
-import { Typography, type TypographyProps } from './typography'
-
-const SelectContext = createContext({
-  disabled: false,
-  hasError: false
-})
-
-function useSelect() {
-  const context = useContext(SelectContext)
-
-  if (!context) {
-    throw new Error('useSelect must be used within a SelectRoot')
-  }
-
-  return context
-}
-
-export function SelectRoot({
-  disabled = false,
-  hasError = false,
-  ...props
-}: ComponentProps<typeof RadixPopover.Root> & {
-  disabled?: boolean
-  hasError?: boolean
-}) {
-  return (
-    <SelectContext.Provider value={{ disabled, hasError }}>
-      <RadixPopover.Root {...props} />
-    </SelectContext.Provider>
-  )
-}
-
-export function SelectTrigger({
-  className,
-  ...props
-}: ComponentProps<typeof RadixPopover.Trigger>) {
-  const { disabled, hasError } = useSelect()
-
-  return (
-    <RadixPopover.Trigger
-      className={twMerge(
-        className,
-        'group h-large-4x rounded-small-1x gap-small py-small_1x-alt px-small relative flex w-full cursor-pointer items-center',
-        'bg-layer-2-idle border-border-layer-2 hover:border-border-layer-3 border',
-        'data-[state=open]:border-primary-idle data-[state=open]:data-[has-error=true]:border-danger-label-active',
-        'has-[input:not(:placeholder-shown)]:text-primary-idle has-[input:not(:placeholder-shown)]:data-[has-error=true]:text-danger-label-active',
-        'has-[input:not(:placeholder-shown)]:border-primary-idle has-[input:not(:placeholder-shown)]:data-[has-error=true]:border-danger-label-active',
-        'disabled:bg-layer-2-idle disabled:cursor-text disabled:border-none disabled:select-text',
-        'data-[has-error=true]:border-danger-idle data-[has-error=true]:hover:border-danger-idle'
-      )}
-      {...props}
-      data-has-error={hasError}
-      disabled={disabled}
-    />
-  )
-}
-
-export function SelectContent({
-  className,
-  children,
-  sideOffset = 4,
-  side = 'bottom',
-  align = 'start',
-  ...props
-}: ComponentProps<typeof RadixPopover.Content>) {
-  return (
-    <RadixPopover.Portal>
-      <RadixPopover.Content
-        align={align}
-        className={twMerge(
-          className,
-          'group z-10 max-h-[var(--radix-popover-content-available-height)] max-w-[var(--radix-popover-content-available-width)] min-w-[var(--radix-popover-trigger-width)]'
-        )}
-        side={side}
-        sideOffset={sideOffset}
-        {...props}
-      >
-        <ListRoot>{children}</ListRoot>
-      </RadixPopover.Content>
-    </RadixPopover.Portal>
-  )
-}
-
-export function SelectValue({
-  className,
-  displayValue = '',
-  ...props
-}: ComponentProps<'input'> & { displayValue?: string }) {
-  return (
-    <>
-      {!!displayValue && (
-        <Typography
-          className={twMerge(
-            className,
-            'text-neutral-dark',
-            // if has left slot, add the left slot padding
-            'group-has-[div[data-slot=select-left-slot]]:pl-large-1x'
-          )}
-        >
-          {displayValue}
-        </Typography>
-      )}
-
-      <input
-        {...props}
-        aria-readonly={true}
-        className={twMerge(className, 'pointer-events-none')}
-        hidden={true}
-        placeholder={props.placeholder ?? ' '}
-        readOnly={true}
-      />
-    </>
-  )
-}
-
-export function SelectMultiValue({
-  className,
-  values,
-  children,
-  ...props
-}: ComponentProps<'div'> & { values: string[] }) {
-  return (
-    <div
-      className={twMerge(
-        className,
-        'gap-small-1x scrollbar-hide overflow-x-small flex',
-        // if has left slot, add the left slot padding
-        'group-has-[div[data-slot=select-left-slot]]:pl-large-1x',
-        // if the trigger is disabled, remove the left slot padding
-        'group-disabled:!pl-0'
-      )}
-      {...props}
-    >
-      {children}
-
-      <input
-        aria-readonly={true}
-        className={twMerge(className, 'pointer-events-none')}
-        hidden={true}
-        placeholder={' '}
-        readOnly={true}
-        value={values.join(',')}
-      />
-    </div>
-  )
-}
-
-export function SelectLabel({
-  className,
-  htmlFor,
-  children,
-  ...props
-}: TypographyProps & { htmlFor?: string }) {
-  const { hasError } = useSelect()
-
-  return (
-    <Typography
-      asChild={true}
-      className={twMerge(
-        'inline-block max-w-full truncate text-left font-normal',
-        'left-small right-small pointer-events-none absolute top-1/2 -translate-y-1/2',
-        'ease transition-all duration-250',
-        // Content Open
-        'group-data-[state=open]:!text-primary-idle group-data-[state=open]:data-[has-error=true]:!text-danger-label-active',
-        'group-data-[state=open]:-top-[3px]',
-        'group-data-[state=open]:text-size-label-sm-1x',
-        'group-data-[state=open]:font-medium',
-        // Filled
-        'group-has-[input:not(:placeholder-shown)]:!text-primary-idle group-has-[input:not(:placeholder-shown)]:data-[has-error=true]:!text-danger-label-active',
-        'group-has-[input:not(:placeholder-shown)]:-top-[3px]',
-        'group-has-[input:not(:placeholder-shown)]:text-size-label-sm-1x',
-        'group-has-[input:not(:placeholder-shown)]:font-medium',
-        // If has left slot
-        'group-has-[div[data-slot=select-left-slot]]:left-large-4x',
-        'group-has-[div[data-slot=select-left-slot]]:group-data-[state=open]:left-small',
-        'group-has-[div[data-slot=select-left-slot]]:group-has-[input:not(:placeholder-shown)]:left-small',
-        // If has right slot
-        'group-has-[div[data-slot=select-right-slot]]:right-large-4x',
-        'group-has-[div[data-slot=select-right-slot]]:group-data-[state=open]:right-small',
-        'group-has-[div[data-slot=select-right-slot]]:group-has-[input:not(:placeholder-shown)]:right-small',
-        // Animate
-        'group-data-[state=open]:animate-in',
-        'group-data-[state=closed]:animate-out',
-        'group-has-[input:not(:placeholder-shown)]:animate-out',
-        'group-disabled:hidden',
-        className
-      )}
-      data-has-error={hasError}
-      {...props}
-    >
-      <label htmlFor={htmlFor}>
-        <span className="bg-layer-2-idle rounded-small-1x max-w-full">
-          {children}
-        </span>
-      </label>
-    </Typography>
-  )
-}
-
-export function SelectOptions(props: ComponentProps<typeof ListContent>) {
-  return <ListContent {...props} />
-}
-
-export function SelectOption({
-  className,
-  ...props
-}: ComponentProps<typeof ListItem>) {
-  return (
-    <ListItem className={twMerge(className, 'cursor-pointer')} {...props} />
-  )
-}
-
-export function SelectOptionText(props: ComponentProps<typeof Typography>) {
-  return <Typography {...props} />
-}
-
-export function SelectHeader(props: ComponentProps<typeof ListHeader>) {
-  return <ListHeader {...props} />
-}
-
-export function SelectHeaderTitle(
-  props: ComponentProps<typeof ListHeaderTitle>
-) {
-  return <ListHeaderTitle {...props} />
-}
-
-export function SelectLeftSlot({ className, ...props }: ComponentProps<'div'>) {
-  return (
-    <div
-      {...props}
-      className={twMerge(
-        className,
-        'left-small absolute top-1/2 flex -translate-y-1/2 items-center justify-center'
-      )}
-      data-slot="select-left-slot"
-    />
-  )
-}
-
-export function SelectRightSlot({
-  className,
-  ...props
-}: ComponentProps<'div'>) {
-  return (
-    <div
-      {...props}
-      className={twMerge(
-        className,
-        'right-small absolute top-1/2 flex -translate-y-1/2 items-center justify-center',
-        'group-disabled:hidden'
-      )}
-      data-slot="select-right-slot"
-    />
-  )
-}
-
-export function SelectSearch(props: ComponentProps<typeof SearchInputText>) {
-  return (
-    <SearchInputRoot variant="line">
-      <SearchInputContent>
-        <SearchInputSlot>
-          <Icon className="text-icon-neutral-3" name="search" />
-        </SearchInputSlot>
-        <SearchInputText {...props} />
-      </SearchInputContent>
-    </SearchInputRoot>
-  )
-}
-
-export function SelectCaption({
-  className,
-  variant = 'body',
-  size = 'sm',
-  weight = 'normal',
-  ...props
-}: ComponentProps<typeof Typography>) {
-  const { hasError } = useSelect()
-
-  const caption = tv({
-    base: 'text-size-body-sm mt-small-1x font-normal',
-    variants: {
-      state: {
-        error: 'text-danger-label-active',
-        idle: 'text-neutral-dark'
-      }
-    }
-  })
-
-  return (
-    <Typography
-      className={caption({
-        state: hasError ? 'error' : 'idle',
-        className
-      })}
-      size={size}
-      variant={variant}
-      weight={weight}
-      {...props}
-    />
-  )
-}