@xjur-ui/react 1.0.0 → 1.0.1

package/src/components/select.tsx

@@ -0,0 +1,234 @@
+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)] 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 flex overflow-x-auto'
+      )}
+      {...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(
+        'bg-layer-2-idle w-fit font-normal',
+        'pointer-events-none absolute top-1/2 left-auto -translate-y-1/2',
+        'ease transition-all duration-250',
+        // Content Open
+        'group-data-[state=open]:text-primary-idle',
+        'group-data-[state=open]:bg-layer-2-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)]:bg-layer-2-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-auto',
+        'group-has-[div[data-slot=select-left-slot]]:group-has-[input:not(:placeholder-shown)]:left-auto',
+        // 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}>{children}</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} />
+}

package/src/components/tag.tsx

@@ -0,0 +1,91 @@
+import { cva, cx, type ClassVariantProps } from '@xjur-ui/util'
+import { type ComponentProps } from 'react'
+import { Typography } from './typography'
+import { Icon, type IconType } from './icon'
+
+const tagVariants = cva(
+  [
+    'group/tag relative h-large-2x w-fit rounded-small-1x px-small py-none flex items-center gap-small_1x-alt',
+    'transition-all duration-200'
+  ],
+  {
+    variants: {
+      variant: {
+        primary:
+          'bg-primary-alt-idle text-primary-label-idle hover:bg-primary-alt-hover',
+        danger:
+          'bg-danger-alt-idle text-danger-label-idle hover:bg-danger-alt-hover',
+        neutral: 'bg-layer-1-idle text-neutral-dark hover:bg-layer-1-hover'
+      }
+    },
+    defaultVariants: {
+      variant: 'primary'
+    }
+  }
+)
+
+export function TagRoot({
+  className,
+  variant = 'primary',
+  ...props
+}: ComponentProps<'div'> & ClassVariantProps<typeof tagVariants>) {
+  return <div className={cx(tagVariants({ variant }), className)} {...props} />
+}
+
+export function TagText({
+  variant = 'label',
+  size = 'sm-1x',
+  weight = 'medium',
+  className,
+  ...props
+}: ComponentProps<typeof Typography>) {
+  return (
+    <Typography
+      className={cx(className, 'truncate')}
+      size={size}
+      variant={variant}
+      weight={weight}
+      {...props}
+    />
+  )
+}
+
+export function TagIcon({ className, ...props }: ComponentProps<typeof Icon>) {
+  return (
+    <Icon
+      className={
+        (cx(
+          'text-size-body-md',
+          'group-data-[variant=primary]:text-primary-label-idle',
+          'group-data-[variant=danger]:text-danger-label-idle',
+          'group-data-[variant=neutral]:text-icon-neutral-3'
+        ),
+        className)
+      }
+      {...props}
+    />
+  )
+}
+
+export function TagClose({
+  className,
+  children = <TagIcon name="close" />,
+  ...props
+}: ComponentProps<'button'> & { name?: IconType }) {
+  return (
+    <button
+      className={cx(
+        className,
+        'cursor-pointer bg-inherit',
+        'invisible items-center justify-center group-hover/tag:visible',
+        'absolute top-0 right-0',
+        'h-large-2x w-large-2x rounded-circle',
+        'transition-[visibility] duration-200'
+      )}
+      type="button"
+      {...props}
+    >
+      {children}
+    </button>
+  )
+}

package/src/index.css

@@ -1,2 +1,5 @@
 @import "tailwindcss";
-@import "@xjur-ui/styles/theme.css";
+@import "@xjur-ui/styles/theme.css";
+@import "tw-animate-css";
+@plugin "tailwind-scrollbar-hide";
+@plugin "tailwind-scrollbar";

package/src/index.ts

@@ -1,2 +1 @@
 import './index.css'
-export * from './components/ui'

package/src/{components/resources → resources}/icons.ts

@@ -125,7 +125,20 @@ export const icons = [
   'wifi_off',
   'wifi',
   'work',
-  'workspaces'
+  'workspaces',
+  'article',
+  'id_card',
+  'badge',
+  'home',
+  'save',
+  'code',
+  'favorite',
+  'analytics',
+  'reports',
+  'event',
+  'account_circle',
+  'history',
+  'security'
 ] as const
 
 export type IconType = (typeof icons)[number]

package/src/resources/input-mask.ts

@@ -0,0 +1,91 @@
+import type { MaskOptions } from '@react-input/mask'
+
+export type InputMaskType =
+  | 'cpf'
+  | 'cnpj'
+  | 'telefone'
+  | 'cep'
+  | 'numero-processo'
+  | 'custom'
+  | 'data'
+  | 'hora'
+  | 'data-hora'
+
+export function inputMask(
+  type: InputMaskType,
+  options?: MaskOptions
+): MaskOptions {
+  switch (type) {
+    case 'cpf':
+      return { ...options, ...CPF_MASK }
+    case 'cnpj':
+      return { ...options, ...CNPJ_MASK }
+    case 'telefone':
+      return { ...options, ...PHONE_MASK }
+    case 'cep':
+      return { ...options, ...CEP_MASK }
+    case 'numero-processo':
+      return { ...options, ...NUMERO_PROCESSO_MASK }
+    case 'data':
+      return { ...options, ...DATE_MASK }
+    case 'hora':
+      return { ...options, ...TIME_MASK }
+    case 'data-hora':
+      return { ...options, ...DATETIME_MASK }
+    case 'custom':
+      if (!options) {
+        throw new Error('Options are required for custom mask')
+      }
+
+      return options
+  }
+}
+
+const CPF_MASK: MaskOptions = {
+  mask: '###.###.###-##',
+  replacement: {
+    '#': /\d/
+  }
+}
+const CNPJ_MASK: MaskOptions = {
+  mask: '##.###.###/####-##',
+  replacement: {
+    '#': /\d/
+  }
+}
+const PHONE_MASK: MaskOptions = {
+  mask: '(##) #####-####',
+  replacement: {
+    '#': /\d/
+  }
+}
+const CEP_MASK: MaskOptions = {
+  mask: '#####-###',
+  replacement: {
+    '#': /\d/
+  }
+}
+const NUMERO_PROCESSO_MASK: MaskOptions = {
+  mask: '#######-##.####.#.##.####',
+  replacement: {
+    '#': /\d/
+  }
+}
+const DATE_MASK: MaskOptions = {
+  mask: '##/##/####',
+  replacement: {
+    '#': /\d/
+  }
+}
+const TIME_MASK: MaskOptions = {
+  mask: '##:##',
+  replacement: {
+    '#': /\d/
+  }
+}
+const DATETIME_MASK: MaskOptions = {
+  mask: '##/##/#### ##:##',
+  replacement: {
+    '#': /\d/
+  }
+}