@xjur-ui/react 2.0.0 → 2.1.0

package/src/components/upload.tsx

@@ -0,0 +1,647 @@
+import type { ComponentProps, DragEvent, ChangeEvent } from 'react'
+import { useRef, useState, useCallback, createContext, useContext } from 'react'
+import { cva, cx, type ClassVariantProps } from '@xjur-ui/util'
+import { Icon, type IconType } from './icon'
+import { Button } from './form/button'
+import { Switch } from './form/switch'
+import { InputRoot, InputContent, InputText } from './form/input'
+import {
+  SelectRoot,
+  SelectTrigger,
+  SelectContent,
+  SelectOption
+} from './form/select'
+
+export interface FileFormat {
+  name: string
+  type: string
+  fileBinary: File
+  restrict?: boolean
+  description?: string
+  fileType?: string
+}
+
+export interface FileTypeOption {
+  value: string
+  label: string
+}
+
+interface UploadContextValue {
+  files: FileFormat[]
+  onFilesChange?: (files: FileFormat[]) => void
+  accept?: string
+  multiple?: boolean
+  disabled?: boolean
+  maxFiles?: number
+  maxSize?: number
+  acceptedFormats?: string[]
+}
+
+const UploadContext = createContext<UploadContextValue | null>(null)
+
+function useUploadContext() {
+  const context = useContext(UploadContext)
+  if (!context) {
+    throw new Error('Upload components must be used within UploadRoot')
+  }
+  return context
+}
+
+interface UploadRootProps extends ComponentProps<'div'> {
+  files: FileFormat[]
+  onFilesChange?: (files: FileFormat[]) => void
+  accept?: string
+  multiple?: boolean
+  disabled?: boolean
+  maxFiles?: number
+  maxSize?: number
+  acceptedFormats?: string[]
+}
+
+function UploadRoot({
+  children,
+  className,
+  files,
+  onFilesChange,
+  accept,
+  multiple = false,
+  disabled = false,
+  maxFiles = 1,
+  maxSize,
+  acceptedFormats = ['.jpeg', '.png', '.webp'],
+  ...props
+}: UploadRootProps) {
+  return (
+    <UploadContext.Provider
+      value={{
+        files,
+        onFilesChange,
+        accept,
+        multiple,
+        disabled,
+        maxFiles,
+        maxSize,
+        acceptedFormats
+      }}
+    >
+      <div className={cx('flex flex-col gap-4', className)} {...props}>
+        {children}
+      </div>
+    </UploadContext.Provider>
+  )
+}
+
+const uploadAreaVariants = cva(
+  [
+    'flex flex-col items-center justify-center',
+    'relative border-2 border-dashed border-border-layer-2 rounded-lg transition-all duration-200 ease-in-out cursor-pointer',
+    'hover:border-border-layer-2 hover:bg-transparent',
+    'focus-within:border-primary-idle focus-within:ring-2 focus-within:ring-primary-idle/20',
+    'data-[drag-over=true]:border-primary-idle data-[drag-over=true]:bg-primary-alt-idle/10'
+  ],
+  {
+    variants: {
+      size: {
+        large: 'p-6 min-h-[200px] ',
+        medium: 'p-6 min-h-[160px]',
+        small: 'p-6 min-h-[130px]',
+        oneLine: 'p-4 min-h-[18px]'
+      },
+      showButton: {
+        true: '',
+        false: ''
+      },
+      variant: {
+        default: 'bg-white',
+        transparent: 'bg-transparent',
+        minimal: 'bg-white',
+        oneLineWhite: 'bg-white',
+        oneLineTransparent: 'bg-transparent'
+      }
+    },
+    compoundVariants: [
+      {
+        size: 'large',
+        showButton: true
+      },
+      {
+        size: 'medium',
+        showButton: true
+      },
+      {
+        size: 'small',
+        showButton: true
+      },
+      {
+        variant: 'oneLineWhite',
+        showButton: false,
+        className: 'items-center flex flex-row justify-center'
+      },
+      {
+        variant: 'oneLineTransparent',
+        showButton: false,
+        className: 'items-center flex flex-row justify-center'
+      }
+    ],
+    defaultVariants: {
+      size: 'large',
+      variant: 'default',
+      showButton: true
+    }
+  }
+)
+
+interface UploadAreaProps
+  extends Omit<ComponentProps<'div'>, 'onChange'>,
+    ClassVariantProps<typeof uploadAreaVariants> {
+  showAcceptedFormats?: boolean
+  buttonText?: string
+  description?: string
+  icon?: string
+  showButton?: boolean
+}
+
+function UploadArea({
+  className,
+  size = 'large',
+  showButton = true,
+  variant = 'default',
+  showAcceptedFormats = true,
+  buttonText = 'Selecionar arquivo',
+  description = 'Clique ou solte os arquivos para fazer o upload',
+  icon = 'upload',
+  ...props
+}: UploadAreaProps) {
+  const {
+    onFilesChange,
+    accept,
+    multiple,
+    disabled,
+    maxFiles,
+    maxSize,
+    acceptedFormats
+  } = useUploadContext()
+  const [isDragOver, setIsDragOver] = useState(false)
+  const fileInputRef = useRef<HTMLInputElement>(null)
+  const [dragCounter, setDragCounter] = useState(0)
+
+  const validateFiles = useCallback(
+    (files: File[]): FileFormat[] => {
+      let validFiles = files
+
+      if (maxFiles && maxFiles > 0) {
+        validFiles = validFiles.slice(0, maxFiles)
+      }
+
+      if (maxSize) {
+        validFiles = validFiles.filter(file => file.size <= maxSize)
+      }
+
+      if (accept) {
+        validFiles = validFiles.filter(file => {
+          const fileExtension = `.${file.name.split('.').pop()?.toLowerCase()}`
+          return acceptedFormats?.some(format =>
+            format.startsWith('.')
+              ? format === fileExtension
+              : file.type.includes(format)
+          )
+        })
+      }
+
+      return validFiles.map(file => ({
+        name: file.name,
+        type: file.type,
+        fileBinary: file,
+        restrict: false
+      }))
+    },
+    [maxFiles, maxSize, accept, acceptedFormats]
+  )
+
+  const handleDragEnter = useCallback((e: DragEvent<HTMLDivElement>) => {
+    e.preventDefault()
+    e.stopPropagation()
+    setDragCounter(prev => prev + 1)
+    setIsDragOver(true)
+  }, [])
+
+  const handleDragLeave = useCallback(
+    (e: DragEvent<HTMLDivElement>) => {
+      e.preventDefault()
+      e.stopPropagation()
+      setDragCounter(prev => prev - 1)
+      if (dragCounter <= 1) {
+        setIsDragOver(false)
+      }
+    },
+    [dragCounter]
+  )
+
+  const handleDragOver = useCallback((e: DragEvent<HTMLDivElement>) => {
+    e.preventDefault()
+    e.stopPropagation()
+  }, [])
+
+  const handleDrop = useCallback(
+    (e: DragEvent<HTMLDivElement>) => {
+      e.preventDefault()
+      e.stopPropagation()
+      setIsDragOver(false)
+      setDragCounter(0)
+
+      if (disabled) return
+
+      const files = Array.from(e.dataTransfer.files)
+      const validFiles = validateFiles(files)
+
+      if (validFiles.length > 0) {
+        onFilesChange?.(validFiles)
+      }
+    },
+    [disabled, onFilesChange, validateFiles]
+  )
+
+  const handleFileSelect = useCallback(
+    (e: ChangeEvent<HTMLInputElement>) => {
+      if (disabled) return
+
+      const files = Array.from(e.target.files || [])
+      const validFiles = validateFiles(files)
+
+      if (validFiles.length > 0) {
+        onFilesChange?.(validFiles)
+      }
+    },
+    [disabled, onFilesChange, validateFiles]
+  )
+
+  return (
+    <UploadAreaTrigger
+      {...props}
+      aria-disabled={disabled}
+      aria-label={description}
+      className={cx(
+        uploadAreaVariants({ size, showButton, variant }),
+        className
+      )}
+      data-drag-over={isDragOver}
+      fileInputRef={fileInputRef}
+      onDragEnter={handleDragEnter}
+      onDragLeave={handleDragLeave}
+      onDragOver={handleDragOver}
+      onDrop={handleDrop}
+    >
+      <input
+        accept={accept}
+        className="hidden"
+        disabled={disabled}
+        multiple={multiple}
+        ref={fileInputRef}
+        type="file"
+        onChange={handleFileSelect}
+      />
+
+      <UploadAreaContent
+        buttonText={buttonText}
+        description={description}
+        icon={icon}
+        showAcceptedFormats={showAcceptedFormats}
+        showButton={showButton}
+        variant={variant || 'default'}
+        onButtonClick={() => {
+          if (!disabled && fileInputRef.current) {
+            fileInputRef.current.click()
+          }
+        }}
+      />
+    </UploadAreaTrigger>
+  )
+}
+
+function UploadTitle({ children, className, ...props }: ComponentProps<'h3'>) {
+  return (
+    <h3
+      className={cx('text-neutral-dark text-lg font-semibold', className)}
+      {...props}
+    >
+      {children}
+    </h3>
+  )
+}
+
+interface UploadAreaContentProps extends ComponentProps<'div'> {
+  description?: string
+  icon?: string
+  showAcceptedFormats?: boolean
+  buttonText?: string
+  showButton?: boolean
+  onButtonClick?: () => void
+  variant?:
+    | 'default'
+    | 'transparent'
+    | 'minimal'
+    | 'oneLineWhite'
+    | 'oneLineTransparent'
+}
+
+function UploadAreaContent({
+  description = 'Clique ou solte os arquivos para fazer o upload',
+  icon = 'upload',
+  showAcceptedFormats = true,
+  buttonText = 'Selecionar arquivo',
+  showButton = true,
+  onButtonClick,
+  variant = 'default',
+  className,
+  ...props
+}: UploadAreaContentProps) {
+  const { acceptedFormats } = useUploadContext()
+
+  const formatAcceptedFormats = () => {
+    if (!showAcceptedFormats) return null
+
+    return (
+      <p className="text-neutral-secondary mt-2 text-sm">
+        Formatos aceitos: {acceptedFormats?.join(' ')}
+      </p>
+    )
+  }
+
+  const isOneLineVariant =
+    variant === 'oneLineWhite' || variant === 'oneLineTransparent'
+
+  if (isOneLineVariant) {
+    return (
+      <div
+        {...props}
+        className={cx(
+          'flex h-full items-center justify-center gap-4 text-center',
+          className
+        )}
+      >
+        <Icon
+          className="text-neutral-secondary text-4xl"
+          name={icon as IconType}
+        />
+        <p className="text-neutral-dark text-base font-medium">{description}</p>
+        {formatAcceptedFormats()}
+      </div>
+    )
+  }
+
+  return (
+    <div
+      {...props}
+      className={cx(
+        'flex h-full w-full flex-col items-center gap-4 text-center',
+        className
+      )}
+    >
+      <div className="flex flex-col items-center">
+        <Icon
+          className="text-neutral-secondary mb-3 text-4xl"
+          name={icon as IconType}
+        />
+
+        <p className="text-neutral-dark mb-2 text-base font-medium">
+          {description}
+        </p>
+
+        {formatAcceptedFormats()}
+      </div>
+
+      {showButton && (
+        <div>
+          <Button
+            size="md"
+            variant="primary"
+            onClick={e => {
+              e.stopPropagation()
+              onButtonClick?.()
+            }}
+          >
+            {buttonText}
+          </Button>
+        </div>
+      )}
+    </div>
+  )
+}
+
+interface UploadAreaTriggerProps extends ComponentProps<'div'> {
+  fileInputRef?: React.RefObject<HTMLInputElement | null>
+}
+
+function UploadAreaTrigger({
+  children,
+  fileInputRef,
+  ...props
+}: UploadAreaTriggerProps) {
+  const { disabled } = useUploadContext()
+
+  const handleClick = useCallback(() => {
+    if (!disabled && fileInputRef?.current) {
+      fileInputRef.current.click()
+    }
+  }, [disabled, fileInputRef])
+
+  return (
+    <div
+      role="button"
+      tabIndex={disabled ? -1 : 0}
+      onClick={handleClick}
+      onKeyDown={e => {
+        if (e.key === 'Enter' || e.key === ' ') {
+          e.preventDefault()
+          handleClick()
+        }
+      }}
+      {...props}
+    >
+      {children}
+    </div>
+  )
+}
+
+interface EditableFilesListProps {
+  fileTypeOptions?: FileTypeOption[]
+  onUpdateFile?: (index: number, file: Partial<FileFormat>) => void
+  onDeleteFile?: (index: number) => void
+  onReorderFiles?: (fromIndex: number, toIndex: number) => void
+  className?: string
+}
+
+function EditableFilesList({
+  fileTypeOptions = [
+    { value: 'document', label: 'Documento' },
+    { value: 'image', label: 'Imagem' },
+    { value: 'video', label: 'Vídeo' },
+    { value: 'audio', label: 'Áudio' },
+    { value: 'other', label: 'Outro' }
+  ],
+  onUpdateFile,
+  onDeleteFile,
+  className,
+  ...props
+}: EditableFilesListProps) {
+  const { files, onFilesChange } = useUploadContext()
+
+  if (!files || files.length === 0) return null
+
+  const handleDescriptionChange = (index: number, description: string) => {
+    if (onUpdateFile) {
+      onUpdateFile(index, { description })
+    } else {
+      const updatedFiles = [...files]
+      updatedFiles[index] = { ...updatedFiles[index], description }
+      onFilesChange?.(updatedFiles)
+    }
+  }
+
+  const handleFileTypeChange = (index: number, fileType: string) => {
+    if (onUpdateFile) {
+      onUpdateFile(index, { fileType })
+    } else {
+      const updatedFiles = [...files]
+      updatedFiles[index] = { ...updatedFiles[index], fileType }
+      onFilesChange?.(updatedFiles)
+    }
+  }
+
+  const handleRestrictChange = (index: number, restrict: boolean) => {
+    if (onUpdateFile) {
+      onUpdateFile(index, { restrict })
+    } else {
+      const updatedFiles = [...files]
+      updatedFiles[index] = { ...updatedFiles[index], restrict }
+      onFilesChange?.(updatedFiles)
+    }
+  }
+
+  const handleDelete = (index: number) => {
+    if (onDeleteFile) {
+      onDeleteFile(index)
+    } else {
+      const updatedFiles = files.filter((_, i) => i !== index)
+      onFilesChange?.(updatedFiles)
+    }
+  }
+
+  return (
+    <div className={cx('space-y-2', className)} {...props}>
+      <div className="border-border-layer-2 p-4">
+        <div className="border-border-layer-2 mb-3 flex w-full flex-row items-center justify-between gap-4 border-b pb-2">
+          <div className="w-full">
+            <span className="text-sm font-medium text-gray-300">Descrição</span>
+          </div>
+          <div className="w-full">
+            <span className="text-sm font-medium text-gray-300">Tipo</span>
+          </div>
+          <div className="flex justify-end">
+            <span className="text-sm font-medium text-gray-300">Restrito</span>
+          </div>
+        </div>
+
+        <div className="space-y-3">
+          {files.map((file, index) => (
+            <div className="flex flex-row items-center gap-4 py-3" key={index}>
+              <div className="flex justify-start">
+                <Icon
+                  className="text-neutral-secondary hover:text-neutral-dark cursor-grab"
+                  name="drag_indicator"
+                />
+              </div>
+
+              <div className="w-full">
+                <InputRoot>
+                  <InputContent>
+                    <InputText
+                      placeholder="Nome do arquivo"
+                      value={file.description || file.name}
+                      onChange={e =>
+                        handleDescriptionChange(index, e.target.value)
+                      }
+                    />
+                  </InputContent>
+                </InputRoot>
+              </div>
+
+              <div className="w-full">
+                <SelectRoot>
+                  <SelectTrigger className="flex justify-between">
+                    <span className="text-neutral-dark">
+                      {fileTypeOptions.find(
+                        option => option.value === file.fileType
+                      )?.label || 'Tipo'}
+                    </span>
+                    <Icon
+                      className="text-neutral-secondary"
+                      name="keyboard_arrow_down"
+                    />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {fileTypeOptions.map(option => (
+                      <SelectOption
+                        key={option.value}
+                        value={option.value}
+                        onSelect={() =>
+                          handleFileTypeChange(index, option.value)
+                        }
+                      >
+                        {option.label}
+                      </SelectOption>
+                    ))}
+                  </SelectContent>
+                </SelectRoot>
+              </div>
+
+              <div className="flex justify-end">
+                <Switch
+                  checked={file.restrict || false}
+                  onCheckedChange={checked =>
+                    handleRestrictChange(index, checked)
+                  }
+                />
+              </div>
+
+              <div className="flex justify-end">
+                <Button
+                  appearance="ghost"
+                  size="sm"
+                  variant="destructive"
+                  onClick={() => handleDelete(index)}
+                >
+                  <Icon name="delete" />
+                </Button>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export const Upload = {
+  Root: UploadRoot,
+  Area: UploadArea,
+  Title: UploadTitle,
+  AreaContent: UploadAreaContent,
+  AreaTrigger: UploadAreaTrigger,
+  EditableList: EditableFilesList
+}
+
+export { UploadRoot }
+export { UploadArea }
+export { UploadTitle }
+export { UploadAreaContent }
+export { UploadAreaTrigger }
+export { EditableFilesList }
+export { uploadAreaVariants }
+export type {
+  UploadRootProps,
+  UploadAreaProps,
+  UploadAreaContentProps,
+  UploadAreaTriggerProps,
+  EditableFilesListProps
+}

package/src/resources/icons.ts

@@ -1,5 +1,7 @@
 export const icons = [
   'account_balance',
+  'assignment',
+  'task',
   'ad_units',
   'add_a_photo',
   'add',
@@ -144,7 +146,8 @@ export const icons = [
   'format_underlined',
   'format_list_bulleted',
   'format_list_numbered',
-  'redo'
+  'redo',
+  'more_horiz'
 ] as const
 
 export type IconType = (typeof icons)[number]

package/dist/chunk-FASEHVMD.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/button.tsx"],"names":["buttonVariants","cva","Button","asChild","className","variant","size","appearance","props","jsx","Slot","cx"],"mappings":"+GAIO,IAAMA,CAAAA,CAAiBC,IAC5B,CACE,iKACF,EACA,CACE,QAAA,CAAU,CACR,IAAA,CAAM,CACJ,EAAA,CAAI,6CAAA,CACJ,GAAI,yCAAA,CACJ,OAAA,CAAS,kDACT,OAAA,CAAS,qDACX,CAAA,CACA,OAAA,CAAS,CACP,OAAA,CAAS,EAAA,CACT,UAAW,EAAA,CACX,QAAA,CAAU,GACV,WAAA,CAAa,EAAA,CACb,QAAA,CACE,+FACJ,EACA,UAAA,CAAY,CACV,MAAO,EAAA,CACP,KAAA,CAAO,gBACT,CACF,CAAA,CACA,gBAAA,CAAkB,CAChB,CACE,OAAA,CAAS,SAAA,CACT,WAAY,OAAA,CACZ,KAAA,CACE,qFACJ,CAAA,CACA,CACE,OAAA,CAAS,SAAA,CACT,WAAY,OAAA,CACZ,KAAA,CACE,2EACJ,CAAA,CACA,CACE,QAAS,WAAA,CACT,UAAA,CAAY,OAAA,CACZ,KAAA,CACE,sFACJ,CAAA,CACA,CACE,QAAS,WAAA,CACT,UAAA,CAAY,QACZ,KAAA,CAAO,kDACT,CAAA,CACA,CACE,QAAS,UAAA,CACT,UAAA,CAAY,QACZ,KAAA,CACE,sFACJ,EACA,CACE,OAAA,CAAS,UAAA,CACT,UAAA,CAAY,QACZ,KAAA,CAAO,kDACT,EACA,CACE,OAAA,CAAS,cACT,UAAA,CAAY,OAAA,CACZ,KAAA,CACE,kFACJ,EACA,CACE,OAAA,CAAS,cACT,UAAA,CAAY,OAAA,CACZ,MACE,8EACJ,CACF,CAAA,CACA,eAAA,CAAiB,CACf,IAAA,CAAM,IAAA,CACN,QAAS,SAAA,CACT,UAAA,CAAY,OACd,CACF,CACF,EAQO,SAASC,EAAO,CACrB,OAAA,CAAAC,EACA,SAAA,CAAAC,CAAAA,CACA,QAAAC,CAAAA,CAAU,SAAA,CACV,IAAA,CAAAC,CAAAA,CAAO,KACP,UAAA,CAAAC,CAAAA,CAAa,QACb,GAAGC,CACL,EAAgB,CAEd,OACEC,GAAAA,CAFgBN,CAAAA,CAAUO,KAAO,QAAA,CAEhC,CACC,UAAWC,EAAAA,CAAGX,CAAAA,CAAe,CAAE,OAAA,CAAAK,CAAAA,CAAS,WAAAE,CAAAA,CAAY,IAAA,CAAAD,CAAK,CAAC,CAAA,CAAGF,CAAS,CAAA,CACrE,GAAGI,EACN,CAEJ","file":"chunk-FASEHVMD.js","sourcesContent":["import { Slot } from '@radix-ui/react-slot'\nimport type { ComponentProps } from 'react'\nimport { cva, cx, type ClassVariantProps } from '@xjur-ui/util'\n\nexport const buttonVariants = cva(\n  [\n    'outline-none inline-flex items-center justify-center rounded-circle gap-small cursor-pointer disabled:opacity-38 disabled:pointer-events-none transition-colors'\n  ],\n  {\n    variants: {\n      size: {\n        md: 'py-small_1x-alt px-medium text-size-body-md',\n        sm: 'py-small-1x px-small text-size-label-sm',\n        icon_md: 'p-small text-size-body-md h-large-4x w-large-4x',\n        icon_sm: 'p-small-1x text-size-label-sm h-large-2x w-large-2x'\n      },\n      variant: {\n        primary: '',\n        secondary: '',\n        tertiary: '',\n        destructive: '',\n        outlined:\n          'bg-layer-2-idle border border-border-layer-2 hover:bg-layer-2-hover active:bg-layer-2-pressed'\n      },\n      appearance: {\n        solid: '',\n        ghost: 'bg-transparent'\n      }\n    },\n    compoundVariants: [\n      {\n        variant: 'primary',\n        appearance: 'solid',\n        class:\n          'bg-primary-idle text-neutral-label hover:bg-primary-hover active:bg-primary-pressed'\n      },\n      {\n        variant: 'primary',\n        appearance: 'ghost',\n        class:\n          'text-primary-idle hover:bg-primary-alt-idle active:bg-primary-alt-pressed'\n      },\n      {\n        variant: 'secondary',\n        appearance: 'solid',\n        class:\n          'bg-layer-1-hover text-neutral-dark hover:bg-layer-1-pressed active:bg-layer-1-active'\n      },\n      {\n        variant: 'secondary',\n        appearance: 'ghost',\n        class: 'hover:bg-layer-1-hover active:bg-layer-1-pressed'\n      },\n      {\n        variant: 'tertiary',\n        appearance: 'solid',\n        class:\n          'bg-layer-2-hover text-neutral-dark hover:bg-layer-2-pressed active:bg-layer-2-active'\n      },\n      {\n        variant: 'tertiary',\n        appearance: 'ghost',\n        class: 'hover:bg-layer-2-hover active:bg-layer-2-pressed'\n      },\n      {\n        variant: 'destructive',\n        appearance: 'solid',\n        class:\n          'bg-danger-idle text-neutral-label hover:bg-danger-hover active:bg-danger-pressed'\n      },\n      {\n        variant: 'destructive',\n        appearance: 'ghost',\n        class:\n          'text-danger-label-idle hover:bg-danger-alt-idle active:bg-danger-alt-pressed'\n      }\n    ],\n    defaultVariants: {\n      size: 'md',\n      variant: 'primary',\n      appearance: 'solid'\n    }\n  }\n)\n\nexport interface ButtonProps\n  extends ComponentProps<'button'>,\n    ClassVariantProps<typeof buttonVariants> {\n  asChild?: boolean\n}\n\nexport function Button({\n  asChild,\n  className,\n  variant = 'primary',\n  size = 'md',\n  appearance = 'solid',\n  ...props\n}: ButtonProps) {\n  const Component = asChild ? Slot : 'button'\n  return (\n    <Component\n      className={cx(buttonVariants({ variant, appearance, size }), className)}\n      {...props}\n    />\n  )\n}\n"]}

package/dist/chunk-NPTLORW5.js

@@ -1,2 +0,0 @@
-import {b as b$1}from'./chunk-FASEHVMD.js';import {a}from'./chunk-EIG6CBTQ.js';import {cx,cva}from'@xjur-ui/util';import {createContext}from'react';import {jsx}from'react/jsx-runtime';var i=createContext({variant:"outlined"});function h({className:e,variant:r="outlined",...o}){return jsx(i.Provider,{value:{variant:r},children:jsx("div",{className:cx(e,"relative flex w-full"),...o})})}function b({className:e,...r}){let o=cva(["gap-small py-small_1x-alt px-small flex items-center w-full","h-large-4x rounded-circle","border-border-layer-2 placeholder:placeholder-neutral-placeholder text-size-body-md text-neutral-dark border font-normal","group-hover:border-border-layer-3 transition-colors duration-200","disabled:opacity-60","focus-within:border-primary-idle"],{variants:{variant:{outlined:"rounded-circle focus-within:border-primary-idle ",line:"rounded-none border-t-0 border-b-1 border-x-0",action:"rounded-tr-none rounded-br-none border-r-0"}}});return jsx(i.Consumer,{children:({variant:a})=>jsx("div",{className:cx(e,o({variant:a})),"data-variant":a,...r})})}function f({htmlFor:e,...r}){return jsx(a,{asChild:true,className:cx("absolute -top-[22px] left-0"),size:"sm",variant:"label",weight:"medium",children:jsx("label",{htmlFor:e,...r})})}function v({className:e,...r}){return jsx("input",{className:cx(e,"flex-1 outline-none"),...r})}function y(e){return jsx("div",{...e,"data-slot":"search-input-slot"})}function C({className:e,appearance:r="ghost",variant:o="outlined",...a}){return jsx(b$1,{...a,appearance:r,className:cx(e,"cursor-pointer","h-large-4x rounded-tr-circle rounded-br-circle px-small py-small_1x-alt flex items-center justify-center rounded-none","text-size-body-md text-neutral-dark gap-small-1x"),"data-slot":"search-input-action",variant:o})}export{h as a,b,f as c,v as d,y as e,C as f};//# sourceMappingURL=chunk-NPTLORW5.js.map
-//# sourceMappingURL=chunk-NPTLORW5.js.map

package/dist/chunk-NPTLORW5.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/search-input.tsx"],"names":["SearchInputRootContext","createContext","SearchInputRoot","className","variant","props","jsx","cx","SearchInputContent","contentVarians","cva","SearchInputLabel","htmlFor","Typography","SearchInputText","SearchInputSlot","SearchInputAction","appearance","Button"],"mappings":"wLASA,IAAMA,CAAAA,CAAyBC,aAAAA,CAAgC,CAC7D,OAAA,CAAS,UACX,CAAC,EAEM,SAASC,CAAAA,CAAgB,CAC9B,SAAA,CAAAC,CAAAA,CACA,OAAA,CAAAC,EAAU,UAAA,CACV,GAAGC,CACL,CAAA,CAA6C,CAC3C,OACEC,IAACN,CAAAA,CAAuB,QAAA,CAAvB,CAAgC,KAAA,CAAO,CAAE,OAAA,CAAAI,CAAQ,CAAA,CAChD,QAAA,CAAAE,GAAAA,CAAC,KAAA,CAAA,CAAI,SAAA,CAAWC,EAAAA,CAAGJ,EAAW,sBAAsB,CAAA,CAAI,GAAGE,CAAAA,CAAO,CAAA,CACpE,CAEJ,CAEO,SAASG,CAAAA,CAAmB,CACjC,SAAA,CAAAL,CAAAA,CACA,GAAGE,CACL,CAAA,CAA0B,CACxB,IAAMI,CAAAA,CAAiBC,GAAAA,CACrB,CACE,8DACA,2BAAA,CACA,0HAAA,CACA,kEAAA,CACA,qBAAA,CACA,kCACF,CAAA,CACA,CACE,QAAA,CAAU,CACR,OAAA,CAAS,CACP,QAAA,CAAU,kDAAA,CACV,KAAM,+CAAA,CACN,MAAA,CAAQ,4CACV,CACF,CACF,CACF,EAEA,OACEJ,GAAAA,CAACN,CAAAA,CAAuB,QAAA,CAAvB,CACE,QAAA,CAAA,CAAC,CAAE,OAAA,CAAAI,CAAQ,CAAA,GACVE,GAAAA,CAAC,KAAA,CAAA,CACC,SAAA,CAAWC,EAAAA,CAAGJ,CAAAA,CAAWM,CAAAA,CAAe,CAAE,OAAA,CAAAL,CAAQ,CAAC,CAAC,EACpD,cAAA,CAAcA,CAAAA,CACb,GAAGC,CAAAA,CACN,CAAA,CAEJ,CAEJ,CAEO,SAASM,CAAAA,CAAiB,CAC/B,OAAA,CAAAC,CAAAA,CACA,GAAGP,CACL,CAAA,CAA4B,CAC1B,OACEC,GAAAA,CAACO,CAAAA,CAAA,CACC,QAAS,IAAA,CACT,SAAA,CAAWN,EAAAA,CAAG,6BAA6B,CAAA,CAC3C,IAAA,CAAK,KACL,OAAA,CAAQ,OAAA,CACR,MAAA,CAAO,QAAA,CAEP,QAAA,CAAAD,GAAAA,CAAC,SAAM,OAAA,CAASM,CAAAA,CAAU,GAAGP,CAAAA,CAAO,CAAA,CACtC,CAEJ,CAEO,SAASS,CAAAA,CAAgB,CAC9B,SAAA,CAAAX,CAAAA,CACA,GAAGE,CACL,CAAA,CAA4B,CAC1B,OAAOC,GAAAA,CAAC,OAAA,CAAA,CAAM,SAAA,CAAWC,GAAGJ,CAAAA,CAAW,qBAAqB,CAAA,CAAI,GAAGE,CAAAA,CAAO,CAC5E,CAEO,SAASU,CAAAA,CAAgBV,CAAAA,CAA8B,CAC5D,OAAOC,GAAAA,CAAC,OAAK,GAAGD,CAAAA,CAAO,WAAA,CAAU,mBAAA,CAAoB,CACvD,CAEO,SAASW,CAAAA,CAAkB,CAChC,SAAA,CAAAb,CAAAA,CACA,UAAA,CAAAc,CAAAA,CAAa,QACb,OAAA,CAAAb,CAAAA,CAAU,UAAA,CACV,GAAGC,CACL,CAAA,CAAgB,CACd,OACEC,GAAAA,CAACY,GAAAA,CAAA,CACE,GAAGb,CAAAA,CACJ,WAAYY,CAAAA,CACZ,SAAA,CAAWV,EAAAA,CACTJ,CAAAA,CACA,gBAAA,CACA,uHAAA,CACA,kDACF,CAAA,CACA,WAAA,CAAU,qBAAA,CACV,OAAA,CAASC,CAAAA,CACX,CAEJ","file":"chunk-NPTLORW5.js","sourcesContent":["import { cva, cx } from '@xjur-ui/util'\nimport { createContext, type ComponentProps } from 'react'\nimport { Typography } from './typography'\nimport { Button, type ButtonProps } from './button'\n\nexport type SearchInputProps = {\n  variant?: 'outlined' | 'line' | 'action'\n}\n\nconst SearchInputRootContext = createContext<SearchInputProps>({\n  variant: 'outlined'\n})\n\nexport function SearchInputRoot({\n  className,\n  variant = 'outlined',\n  ...props\n}: ComponentProps<'div'> & SearchInputProps) {\n  return (\n    <SearchInputRootContext.Provider value={{ variant }}>\n      <div className={cx(className, 'relative flex w-full')} {...props} />\n    </SearchInputRootContext.Provider>\n  )\n}\n\nexport function SearchInputContent({\n  className,\n  ...props\n}: ComponentProps<'div'>) {\n  const contentVarians = cva(\n    [\n      'gap-small py-small_1x-alt px-small flex items-center w-full',\n      'h-large-4x rounded-circle',\n      'border-border-layer-2 placeholder:placeholder-neutral-placeholder text-size-body-md text-neutral-dark border font-normal',\n      'group-hover:border-border-layer-3 transition-colors duration-200',\n      'disabled:opacity-60',\n      'focus-within:border-primary-idle'\n    ],\n    {\n      variants: {\n        variant: {\n          outlined: 'rounded-circle focus-within:border-primary-idle ',\n          line: 'rounded-none border-t-0 border-b-1 border-x-0',\n          action: 'rounded-tr-none rounded-br-none border-r-0'\n        }\n      }\n    }\n  )\n\n  return (\n    <SearchInputRootContext.Consumer>\n      {({ variant }) => (\n        <div\n          className={cx(className, contentVarians({ variant }))}\n          data-variant={variant}\n          {...props}\n        />\n      )}\n    </SearchInputRootContext.Consumer>\n  )\n}\n\nexport function SearchInputLabel({\n  htmlFor,\n  ...props\n}: ComponentProps<'label'>) {\n  return (\n    <Typography\n      asChild={true}\n      className={cx('absolute -top-[22px] left-0')}\n      size=\"sm\"\n      variant=\"label\"\n      weight=\"medium\"\n    >\n      <label htmlFor={htmlFor} {...props} />\n    </Typography>\n  )\n}\n\nexport function SearchInputText({\n  className,\n  ...props\n}: ComponentProps<'input'>) {\n  return <input className={cx(className, 'flex-1 outline-none')} {...props} />\n}\n\nexport function SearchInputSlot(props: ComponentProps<'div'>) {\n  return <div {...props} data-slot=\"search-input-slot\" />\n}\n\nexport function SearchInputAction({\n  className,\n  appearance = 'ghost',\n  variant = 'outlined',\n  ...props\n}: ButtonProps) {\n  return (\n    <Button\n      {...props}\n      appearance={appearance}\n      className={cx(\n        className,\n        'cursor-pointer',\n        'h-large-4x rounded-tr-circle rounded-br-circle px-small py-small_1x-alt flex items-center justify-center rounded-none',\n        'text-size-body-md text-neutral-dark gap-small-1x'\n      )}\n      data-slot=\"search-input-action\"\n      variant={variant}\n    />\n  )\n}\n"]}