@xjur-ui/react 1.0.0 → 1.0.2

package/src/components/radio.tsx

@@ -0,0 +1,74 @@
+import * as React from 'react'
+import * as RadioGroupPrimitive from '@radix-ui/react-radio-group'
+import { cx } from '@xjur-ui/util'
+import { Typography } from './typography'
+
+export function RadioGroup({
+  className,
+  orientation = 'vertical',
+  ...props
+}: React.ComponentProps<typeof RadioGroupPrimitive.Root>) {
+  return (
+    <RadioGroupPrimitive.Root
+      className={cx(
+        'gap-small flex data-[orientation=horizontal]:flex-row data-[orientation=vertical]:flex-col',
+        className
+      )}
+      data-orientation={orientation}
+      data-slot="radio-group"
+      {...props}
+    />
+  )
+}
+
+export function RadioItem({
+  className,
+  id,
+  label,
+  disabled = false,
+  ...props
+}: React.ComponentProps<typeof RadioGroupPrimitive.Item> & {
+  label?: string
+}) {
+  return (
+    <div className="gap-small flex items-center">
+      <RadioGroupPrimitive.Item
+        className={cx(
+          // layout
+          'size-large-alt rounded-circle inline-flex items-center justify-center transition-[border-color,box-shadow,background-color] duration-200 outline-none',
+          // base
+          'border-border-layer-2 bg-layer-2-idle cursor-pointer border-2',
+          // hover/focus (desmarcado)
+          'hover:border-primary-idle focus:border-primary-idle focus:shadow-focus-primary',
+          // estado checked
+          'data-[state=checked]:bg-primary-active data-[state=checked]:border-primary-active',
+          // hover quando estiver checked (opcional)
+          'data-[state=checked]:hover:border-primary-idle',
+          // disabled
+          'disabled:hover:border-border-layer-2 disabled:cursor-not-allowed disabled:opacity-[38%]',
+          className
+        )}
+        data-slot="radio-group-item"
+        disabled={disabled}
+        id={id}
+        {...props}
+      >
+        <RadioGroupPrimitive.Indicator
+          className="relative flex items-center justify-center"
+          data-slot="radio-group-indicator"
+        />
+      </RadioGroupPrimitive.Item>
+
+      {!!label && (
+        <Typography
+          asChild={true}
+          className="text-size-body-sm data-[disabled=true]:opacity-38"
+          data-disabled={disabled}
+          weight="medium"
+        >
+          <label htmlFor={id}>{label}</label>
+        </Typography>
+      )}
+    </div>
+  )
+}

package/src/components/search-input.tsx

@@ -0,0 +1,112 @@
+import { cva, cx } from '@xjur-ui/util'
+import { createContext, type ComponentProps } from 'react'
+import { Typography } from './typography'
+import { Button, type ButtonProps } from './button'
+
+export type SearchInputProps = {
+  variant?: 'outlined' | 'line' | 'action'
+}
+
+const SearchInputRootContext = createContext<SearchInputProps>({
+  variant: 'outlined'
+})
+
+export function SearchInputRoot({
+  className,
+  variant = 'outlined',
+  ...props
+}: ComponentProps<'div'> & SearchInputProps) {
+  return (
+    <SearchInputRootContext.Provider value={{ variant }}>
+      <div className={cx(className, 'relative flex w-full')} {...props} />
+    </SearchInputRootContext.Provider>
+  )
+}
+
+export function SearchInputContent({
+  className,
+  ...props
+}: ComponentProps<'div'>) {
+  const contentVarians = 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 focus-within:shadow-focus-primary',
+          line: 'rounded-none border-t-0 border-b-1 border-x-0',
+          action: 'rounded-tr-none rounded-br-none border-r-0'
+        }
+      }
+    }
+  )
+
+  return (
+    <SearchInputRootContext.Consumer>
+      {({ variant }) => (
+        <div
+          className={cx(className, contentVarians({ variant }))}
+          data-variant={variant}
+          {...props}
+        />
+      )}
+    </SearchInputRootContext.Consumer>
+  )
+}
+
+export function SearchInputLabel({
+  htmlFor,
+  ...props
+}: ComponentProps<'label'>) {
+  return (
+    <Typography
+      asChild={true}
+      className={cx('absolute -top-[22px] left-0')}
+      size="sm"
+      variant="label"
+      weight="medium"
+    >
+      <label htmlFor={htmlFor} {...props} />
+    </Typography>
+  )
+}
+
+export function SearchInputText({
+  className,
+  ...props
+}: ComponentProps<'input'>) {
+  return <input className={cx(className, 'flex-1 outline-none')} {...props} />
+}
+
+export function SearchInputSlot(props: ComponentProps<'div'>) {
+  return <div {...props} data-slot="search-input-slot" />
+}
+
+export function SearchInputAction({
+  className,
+  appearance = 'ghost',
+  variant = 'outlined',
+  ...props
+}: ButtonProps) {
+  return (
+    <Button
+      {...props}
+      appearance={appearance}
+      className={cx(
+        className,
+        '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={variant}
+    />
+  )
+}

package/src/components/select.tsx

@@ -0,0 +1,240 @@
+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 data-[state=open]:shadow-focus-primary',
+        '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/sheet.tsx

@@ -0,0 +1,141 @@
+import * as React from 'react'
+import * as SheetPrimitive from '@radix-ui/react-dialog'
+import { cx } from '@xjur-ui/util'
+import { Button } from './button'
+import { Icon } from './icon'
+
+export function SheetRoot({
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Root>) {
+  return <SheetPrimitive.Root data-slot="sheet" {...props} />
+}
+
+export function SheetTrigger({
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Trigger>) {
+  return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />
+}
+
+export function SheetClose({
+  children = (
+    <Button appearance="ghost" size="icon_md" variant="tertiary">
+      <Icon className="text-icon-neutral-3" name="close" />
+    </Button>
+  ),
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Close>) {
+  return (
+    <SheetPrimitive.Close data-slot="sheet-close" {...props}>
+      {children}
+    </SheetPrimitive.Close>
+  )
+}
+
+export function SheetPortal({
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Portal>) {
+  return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />
+}
+
+export function SheetOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Overlay>) {
+  return (
+    <SheetPrimitive.Overlay
+      className={cx(
+        'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50',
+        className
+      )}
+      data-slot="sheet-overlay"
+      {...props}
+    />
+  )
+}
+
+export function SheetContent({
+  className,
+  children,
+  side = 'right',
+  overlay = false,
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Content> & {
+  side?: 'top' | 'right' | 'bottom' | 'left'
+  overlay?: boolean
+}) {
+  return (
+    <SheetPortal>
+      {overlay && <SheetOverlay />}
+      <SheetPrimitive.Content
+        className={cx(
+          'border-border-layer-2 bg-layer-2-idle data-[state=open]:animate-in data-[state=closed]:animate-out shadow-elevation-2 fixed z-50 flex flex-col gap-4 transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500',
+          side === 'right' &&
+            'data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm',
+          side === 'left' &&
+            'data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm',
+          side === 'top' &&
+            'data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b',
+          side === 'bottom' &&
+            'data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t',
+          className
+        )}
+        data-slot="sheet-content"
+        {...props}
+      >
+        {children}
+      </SheetPrimitive.Content>
+    </SheetPortal>
+  )
+}
+
+export function SheetBody({
+  className,
+  ...props
+}: React.ComponentProps<'div'>) {
+  return <div className={cx('px-large-2x', className)} {...props} />
+}
+
+export function SheetHeader({
+  className,
+  ...props
+}: React.ComponentProps<'div'>) {
+  return (
+    <div
+      className={cx(
+        'py-large px-large-2x border-b-border-layer-2 border-b',
+        className
+      )}
+      data-slot="sheet-header"
+      {...props}
+    />
+  )
+}
+
+export function SheetFooter({
+  className,
+  ...props
+}: React.ComponentProps<'div'>) {
+  return (
+    <div
+      className={cx(
+        'py-large px-large-2x border-t-border-layer-2 mt-auto border-t',
+        className
+      )}
+      data-slot="sheet-footer"
+      {...props}
+    />
+  )
+}
+
+export function SheetTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Title>) {
+  return (
+    <SheetPrimitive.Title
+      className={cx('text-size-title-lg font-medium', className)}
+      data-slot="sheet-title"
+      {...props}
+    />
+  )
+}

package/src/components/switch.tsx

@@ -0,0 +1,31 @@
+import * as React from 'react'
+import * as SwitchPrimitive from '@radix-ui/react-switch'
+import { cx } from '@xjur-ui/util'
+
+function Switch({
+  className,
+  ...props
+}: React.ComponentProps<typeof SwitchPrimitive.Root>) {
+  return (
+    <SwitchPrimitive.Root
+      className={cx(
+        'w-large-3x h-large rounded-circle inline-flex shrink-0 items-center border border-transparent',
+        'peer data-[state=checked]:bg-primary-idle data-[state=unchecked]:bg-alt-4',
+        'focus-visible:border-ring focus-visible:ring-ring/50 transition-all outline-none disabled:cursor-not-allowed disabled:opacity-50',
+        'hover:shadow-focus-primary p-[2px]',
+        className
+      )}
+      data-slot="switch"
+      {...props}
+    >
+      <SwitchPrimitive.Thumb
+        className={cx(
+          'bg-layer-2-idle size-medium pointer-events-none rounded-full ring-0 transition-transform data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0'
+        )}
+        data-slot="switch-thumb"
+      />
+    </SwitchPrimitive.Root>
+  )
+}
+
+export { Switch }

package/src/components/tabs.tsx

@@ -0,0 +1,53 @@
+import * as TabsPrimitive from '@radix-ui/react-tabs'
+import { cva, cx } from '@xjur-ui/util'
+
+export function TabsRoot({
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Tabs>) {
+  return <TabsPrimitive.Tabs {...props} />
+}
+
+export function TabsList({
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.TabsList>) {
+  return <TabsPrimitive.TabsList {...props} />
+}
+
+export function TabsTrigger({
+  variant,
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.TabsTrigger> & {
+  variant?: 'line' | 'button'
+}) {
+  const variants = cva(
+    [
+      'rounded-small-1x h-large-4x cursor-pointer text-size-label-md text-neutral-dark'
+    ],
+    {
+      variants: {
+        variant: {
+          line: 'py-small_1x-alt px-small data-[state=active]:border-b-[3px] data-[state=active]:border-b-primary-active data-[state=active]:rounded-none hover:bg-layer-2-hover',
+          button:
+            'rounded-br-none rounded-bl-none py-small_1x-alt px-large bg-primary-idle text-neutral-label hover:bg-primary-hover data-[state=active]:bg-layer-2-idle data-[state=active]:text-primary-label-active'
+        }
+      },
+      defaultVariants: {
+        variant: 'button'
+      }
+    }
+  )
+
+  return (
+    <TabsPrimitive.TabsTrigger
+      className={cx(className, variants({ variant }))}
+      {...props}
+    />
+  )
+}
+
+export function TabsContent({
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.TabsContent>) {
+  return <TabsPrimitive.TabsContent {...props} />
+}