@xjur-ui/react 1.0.6 → 2.1.0

package/src/components/date-picker.tsx

@@ -1,160 +0,0 @@
-import type { ComponentProps } from 'react'
-import * as RadixPopover from '@radix-ui/react-popover'
-import { cx } from '@xjur-ui/util'
-import { Typography, type TypographyProps } from './typography'
-
-export function DatePickerRoot(
-  props: ComponentProps<typeof RadixPopover.Root>
-) {
-  return <RadixPopover.Root {...props} />
-}
-
-export function DatePickerTrigger({
-  className,
-  ...props
-}: ComponentProps<typeof RadixPopover.Trigger>) {
-  return (
-    <RadixPopover.Trigger
-      className={cx(
-        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',
-        'has-[input:not(:placeholder-shown)]:text-primary-idle',
-        'has-[input:not(:placeholder-shown)]:border-primary-idle'
-      )}
-      {...props}
-    />
-  )
-}
-
-export function DatePickerContent({
-  className,
-  sideOffset = 5,
-  side = 'bottom',
-  align = 'start',
-  ...props
-}: ComponentProps<typeof RadixPopover.Content>) {
-  return (
-    <RadixPopover.Portal>
-      <RadixPopover.Content
-        align={align}
-        className={cx(
-          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}
-      />
-    </RadixPopover.Portal>
-  )
-}
-
-export function DatePickerValue({
-  className,
-  displayValue = '',
-  value,
-  ...props
-}: ComponentProps<'input'> & { displayValue?: string }) {
-  return (
-    <>
-      {!!displayValue && (
-        <Typography className="text-neutral-dark group-has-[div[data-slot=date-picker-left-slot]]:pl-large-1x">
-          {displayValue}
-        </Typography>
-      )}
-
-      <input
-        {...props}
-        aria-readonly={true}
-        className={cx('pointer-events-none', className)}
-        hidden={true}
-        placeholder={props.placeholder ?? ' '}
-        readOnly={true}
-        value={value ?? ''}
-      />
-    </>
-  )
-}
-
-export function DatePickerLabel({
-  className,
-  htmlFor,
-  children,
-  ...props
-}: TypographyProps & { htmlFor?: string }) {
-  return (
-    <Typography
-      asChild={true}
-      className={cx(
-        '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]:-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)]:-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=date-picker-left-slot]]:left-large-4x',
-        'group-has-[div[data-slot=date-picker-left-slot]]:group-data-[state=open]:left-small',
-        'group-has-[div[data-slot=date-picker-left-slot]]:group-has-[input:not(:placeholder-shown)]:left-small',
-        // If has right slot
-        'group-has-[div[data-slot=date-picker-right-slot]]:right-large-4x',
-        'group-has-[div[data-slot=date-picker-right-slot]]:group-data-[state=open]:right-small',
-        'group-has-[div[data-slot=date-picker-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',
-        className
-      )}
-      weight="medium"
-      {...props}
-    >
-      <label htmlFor={htmlFor}>
-        <span className="bg-layer-2-idle rounded-small-1x max-w-full">
-          {children}
-        </span>
-      </label>
-    </Typography>
-  )
-}
-
-export function DatePickerLeftSlot({
-  className,
-  ...props
-}: ComponentProps<'div'>) {
-  return (
-    <div
-      {...props}
-      className={cx(
-        className,
-        'left-small absolute top-1/2 flex -translate-y-1/2 items-center justify-center'
-      )}
-      data-slot="date-picker-left-slot"
-    />
-  )
-}
-
-export function DatePickerRightSlot({
-  className,
-  ...props
-}: ComponentProps<'div'>) {
-  return (
-    <div
-      {...props}
-      className={cx(
-        className,
-        'right-small absolute top-1/2 flex -translate-y-1/2 items-center justify-center'
-      )}
-      data-slot="date-picker-right-slot"
-    />
-  )
-}

package/src/components/input.tsx

@@ -1,256 +0,0 @@
-import { cva, cx } from '@xjur-ui/util'
-import type { ComponentProps } from 'react'
-import { createContext } from 'react'
-import { InputMask, type MaskOptions } from '@react-input/mask'
-import {
-  InputNumberFormat,
-  type InputNumberFormatProps
-} from '@react-input/number-format'
-import { inputMask, type InputMaskType } from '../resources/input-mask'
-
-export { inputMask, type InputMaskType, type MaskOptions }
-
-export type InputProps = {
-  variant?: 'outlined' | 'filled'
-}
-
-const FieldContext = createContext<InputProps>({
-  variant: 'filled'
-})
-
-export function InputRoot({
-  className,
-  children,
-  variant = 'filled',
-  ...props
-}: ComponentProps<'div'> & InputProps) {
-  return (
-    <FieldContext.Provider value={{ variant }}>
-      <div
-        className={cx(
-          'group gap-small relative flex w-full flex-col',
-          className
-        )}
-        {...props}
-      >
-        {children}
-      </div>
-    </FieldContext.Provider>
-  )
-}
-
-export function InputContent({ className, ...props }: ComponentProps<'div'>) {
-  const variants = cva(
-    [
-      'relative h-large-4x rounded-small-1x gap-small py-small_1x-alt px-small flex items-center w-full',
-      'focus-within:border-primary-idle focus-within:border',
-      'group-has-[div[data-slot=input-right-action-slot]]:rounded-r-none',
-      'group-has-[div[data-slot=input-left-action-slot]]:rounded-l-none'
-    ],
-    {
-      variants: {
-        variant: {
-          default: '',
-          outlined:
-            'bg-layer-2-idle border-border-layer-2 border hover:group-has-[input:not(:focus-within)]:border-border-layer-3 has-[input:not(:placeholder-shown)]:border-primary-idle',
-          filled:
-            'bg-layer-2-hover group-hover:border-border-layer-1 group-hover:border-1'
-        }
-      }
-    }
-  )
-
-  return (
-    <FieldContext.Consumer>
-      {({ variant }) => {
-        return (
-          <div className={cx(className, variants({ variant }))} {...props} />
-        )
-      }}
-    </FieldContext.Consumer>
-  )
-}
-
-export function InputLabel({
-  htmlFor,
-  className,
-  children,
-  ...props
-}: ComponentProps<'label'> & { htmlFor: string }) {
-  return (
-    <FieldContext.Consumer>
-      {({ variant }) => {
-        return (
-          <label
-            className={cx(
-              'group text-size-body-md text-neutral-dark inline-block max-w-full truncate text-left',
-              'ease animate-in left-small right-small pointer-events-none absolute top-1/2 -translate-y-1/2 transition-all duration-250',
-              // Filled
-              'group-focus-within:text-primary-idle group-focus-within:-top-[3px]',
-              'group-focus-within:text-size-label-sm-1x group-focus-within:font-medium',
-              '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',
-              'data-[variant=outlined]:group-has-[input:not(:placeholder-shown)]:text-primary-idle',
-              // If has left slot
-              'group-has-[div[data-slot=input-left-slot]]:left-large-4x',
-              'group-has-[div[data-slot=input-left-slot]]:group-focus-within:left-small',
-              'group-has-[div[data-slot=input-left-slot]]:group-has-[input:not(:placeholder-shown)]:left-small',
-              // If has right slot
-              'group-has-[div[data-slot=input-right-slot]]:right-large-4x',
-              'group-has-[div[data-slot=input-right-slot]]:group-focus-within:right-small',
-              'group-has-[div[data-slot=input-right-slot]]:group-has-[input:not(:placeholder-shown)]:right-small',
-              // Animate
-              'group-focus-within:animate-in',
-              'group-has-[input:not(:placeholder-shown)]:animate-out',
-              className
-            )}
-            data-variant={variant}
-            htmlFor={htmlFor}
-            {...props}
-          >
-            <span
-              className={cx(
-                'rounded-small-1x max-w-full',
-                'group-data-[variant=outlined]:group-focus-within:bg-layer-2-idle group-data-[variant=filled]:group-focus-within:bg-layer-2-hover',
-                'group-data-[variant=outlined]:bg-layer-2-idle group-data-[variant=filled]:bg-layer-2-hover'
-              )}
-            >
-              {children}
-            </span>
-          </label>
-        )
-      }}
-    </FieldContext.Consumer>
-  )
-}
-
-export function InputText({
-  className,
-  maskOptions,
-  maskType,
-  ...props
-}: ComponentProps<'input'> & {
-  maskOptions?: MaskOptions
-  maskType?: InputMaskType
-}) {
-  const Component = maskOptions || maskType ? InputMask : 'input'
-
-  return (
-    <Component
-      {...props}
-      {...(maskType
-        ? { ...inputMask(maskType) }
-        : maskOptions && { ...maskOptions })}
-      className={cx(
-        className,
-        'peer text-size-body-md text-neutral-dark flex-1 font-medium outline-none',
-        'group-has-[div[data-slot=input-left-slot]]:pl-large-1x ml-small-1x'
-      )}
-      placeholder={props.placeholder || ' '}
-      {...(maskOptions && { ...maskOptions })}
-    />
-  )
-}
-
-export function InputNumber({
-  className,
-  locales = 'pt-BR',
-  ...props
-}: InputNumberFormatProps) {
-  return (
-    <InputNumberFormat
-      {...props}
-      className={cx(
-        className,
-        'peer text-size-body-md text-neutral-dark flex-1 font-medium outline-none',
-        'group-has-[div[data-slot=input-left-slot]]:pl-large-1x ml-small-1x'
-      )}
-      locales={locales}
-      placeholder={props.placeholder || ' '}
-    />
-  )
-}
-
-export function InputLeftSlot({ className, ...props }: ComponentProps<'div'>) {
-  return (
-    <div
-      {...props}
-      className={cx(
-        className,
-        'left-small absolute top-1/2 flex -translate-y-1/2 items-center justify-center'
-      )}
-      data-slot="input-left-slot"
-    />
-  )
-}
-
-export function InputRightSlot({ className, ...props }: ComponentProps<'div'>) {
-  return (
-    <div
-      {...props}
-      className={cx(
-        className,
-        'right-small absolute top-1/2 flex -translate-y-1/2 items-center justify-center'
-      )}
-      data-slot="input-right-slot"
-    />
-  )
-}
-
-export function InputMessage({ className, ...props }: ComponentProps<'p'>) {
-  return (
-    <p
-      {...props}
-      className={cx(
-        'text-size-body-sm text-neutral-dark font-normal',
-        className
-      )}
-    />
-  )
-}
-
-export function InputContainer({ className, ...props }: ComponentProps<'div'>) {
-  return (
-    <div
-      {...props}
-      className={cx(className, 'flex items-center')}
-      data-slot="input-content"
-    />
-  )
-}
-
-export function InputAction({
-  className,
-  side,
-  ...props
-}: ComponentProps<'div'> & {
-  side: 'left' | 'right'
-}) {
-  return (
-    <div
-      {...props}
-      className={cx(
-        className,
-        'group h-large-4x flex items-center justify-center'
-      )}
-      data-side={side}
-      data-slot={`input-${side}-action-slot`}
-    />
-  )
-}
-
-export function InputActionButton({
-  className,
-  ...props
-}: ComponentProps<'div'>) {
-  return (
-    <div
-      {...props}
-      className={cx(
-        className,
-        'h-large-4x w-large-4x bg-layer-2-hover flex cursor-pointer items-center justify-center'
-      )}
-    />
-  )
-}

package/src/components/select.tsx

@@ -1,240 +0,0 @@
-import type { ComponentProps } from 'react'
-import * as RadixPopover from '@radix-ui/react-popover'
-import { cx } 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'
-
-export function SelectRoot(props: ComponentProps<typeof RadixPopover.Root>) {
-  return <RadixPopover.Root {...props} />
-}
-
-export function SelectTrigger({
-  className,
-  ...props
-}: ComponentProps<typeof RadixPopover.Trigger>) {
-  return (
-    <RadixPopover.Trigger
-      className={cx(
-        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',
-        'has-[input:not(:placeholder-shown)]:text-primary-idle',
-        'has-[input:not(:placeholder-shown)]:border-primary-idle'
-      )}
-      {...props}
-    />
-  )
-}
-
-export function SelectContent({
-  className,
-  children,
-  sideOffset = 4,
-  side = 'bottom',
-  align = 'start',
-  ...props
-}: ComponentProps<typeof RadixPopover.Content>) {
-  return (
-    <RadixPopover.Portal>
-      <RadixPopover.Content
-        align={align}
-        className={cx(
-          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="text-neutral-dark group-has-[div[data-slot=select-left-slot]]:pl-large-1x">
-          {displayValue}
-        </Typography>
-      )}
-
-      <input
-        {...props}
-        aria-readonly={true}
-        className={cx(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={cx(
-        className,
-        'gap-small-1x scrollbar-hide group-has-[div[data-slot=select-left-slot]]:pl-large-1x overflow-x-small flex'
-      )}
-      {...props}
-    >
-      {children}
-
-      <input
-        aria-readonly={true}
-        className={cx(className, 'pointer-events-none')}
-        hidden={true}
-        placeholder={' '}
-        readOnly={true}
-        value={values.join(',')}
-      />
-    </div>
-  )
-}
-
-export function SelectLabel({
-  className,
-  htmlFor,
-  children,
-  ...props
-}: TypographyProps & { htmlFor?: string }) {
-  return (
-    <Typography
-      asChild={true}
-      className={cx(
-        '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]:-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)]:-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',
-        className
-      )}
-      weight="medium"
-      {...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={cx(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 SelectDropdown(props: ComponentProps<'div'>) {
-  return <div {...props} />
-}
-
-export function SelectLeftSlot({ className, ...props }: ComponentProps<'div'>) {
-  return (
-    <div
-      {...props}
-      className={cx(
-        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={cx(
-        className,
-        'right-small absolute top-1/2 flex -translate-y-1/2 items-center justify-center'
-      )}
-      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>
-  )
-}

package/src/components/test.tsx

@@ -1,3 +0,0 @@
-export function Test() {
-  return <div>Test</div>
-}

package/src/index.ts

@@ -1 +0,0 @@
-import './index.css'

package/src/resources/logo/index.ts

@@ -1,3 +0,0 @@
-export { Horizontal } from './horizontal'
-export { Vertical } from './vertical'
-export { Icon } from './icon'