@xjur-ui/react 2.1.1 → 2.2.0

package/src/components/table/table-sort.tsx

@@ -1,34 +0,0 @@
-import { cx } from '@xjur-ui/util'
-import { Icon } from '../icon'
-
-export function TableSort({
-  className,
-  sortedDirection,
-  ...props
-}: React.ComponentProps<'button'> & { sortedDirection?: 'asc' | 'desc' }) {
-  return (
-    <button
-      className={cx(
-        'size-large-1x rounded-small-1x',
-        'flex cursor-pointer items-center justify-center',
-        'hidden group-hover/th:flex',
-        'data-[sorted=true]:flex',
-        'transition-all duration-200 ease-out',
-        'data-[sorted=true]:bg-primary-alt-active data-[sorted=true]:text-primary-label-active',
-        'absolute top-1/2 right-0 -translate-y-1/2',
-        className
-      )}
-      data-sorted={sortedDirection !== undefined}
-      type="button"
-      {...props}
-    >
-      {sortedDirection !== undefined ? (
-        <Icon
-          name={sortedDirection === 'asc' ? 'arrow_downward' : 'arrow_upward'}
-        />
-      ) : (
-        <Icon name="swap_vert" />
-      )}
-    </button>
-  )
-}

package/src/components/table/table.tsx

@@ -1,16 +0,0 @@
-import { cx } from '@xjur-ui/util'
-
-export function Table({ className, ...props }: React.ComponentProps<'table'>) {
-  return (
-    <div
-      className="text-size-body-md scrollbar-thin relative w-full overflow-hidden transition-all hover:overflow-x-auto"
-      data-slot="table-container"
-    >
-      <table
-        className={cx('w-full caption-bottom', className)}
-        data-slot="table"
-        {...props}
-      />
-    </div>
-  )
-}

package/src/components/tabs.tsx

@@ -1,72 +0,0 @@
-import * as React from 'react'
-import * as TabsPrimitive from '@radix-ui/react-tabs'
-import { tv } from '@xjur-ui/util'
-
-const tabsStyles = tv({
-  slots: {
-    list: 'flex items-center gap-0',
-    trigger:
-      'inline-flex items-center justify-center gap-small px-small py-small_1x-alt h-large-4x ' +
-      'font-medium cursor-pointer transition-colors !text-size-label-md ' +
-      'disabled:opacity-38 disabled:pointer-events-none',
-    content: ''
-  },
-  variants: {
-    variant: {
-      line: {
-        trigger:
-          'rounded-small-1x text-neutral-dark border-b-[3px] border-b-transparent ' +
-          'hover:bg-layer-2-hover ' +
-          'data-[state=active]:text-primary-active ' +
-          'data-[state=active]:border-b-primary-active ' +
-          'data-[state=active]:rounded-none data-[state=active]:bg-transparent'
-      },
-      button: {
-        trigger:
-          'rounded-tl-small-1x rounded-tr-small-1x rounded-bl-none rounded-br-none px-large ' +
-          'bg-primary-idle text-neutral-label ' +
-          'hover:bg-primary-hover ' +
-          'data-[state=active]:bg-layer-2-idle data-[state=active]:text-primary-active'
-      }
-    }
-  },
-  defaultVariants: {
-    variant: 'button'
-  }
-})
-
-export function TabsRoot(
-  props: React.ComponentProps<typeof TabsPrimitive.Tabs>
-) {
-  return <TabsPrimitive.Tabs {...props} />
-}
-
-export type TabsListProps = React.ComponentProps<typeof TabsPrimitive.TabsList>
-
-export function TabsList({ className, ...props }: TabsListProps) {
-  const { list } = tabsStyles({})
-  return <TabsPrimitive.TabsList className={list({ className })} {...props} />
-}
-
-export interface TabsTriggerProps
-  extends React.ComponentProps<typeof TabsPrimitive.TabsTrigger> {
-  variant?: 'line' | 'button'
-}
-
-export function TabsTrigger({
-  variant,
-  className,
-  ...props
-}: TabsTriggerProps) {
-  const { trigger } = tabsStyles({ variant })
-  return (
-    <TabsPrimitive.TabsTrigger className={trigger({ className })} {...props} />
-  )
-}
-
-export function TabsContent(
-  props: React.ComponentProps<typeof TabsPrimitive.TabsContent>
-) {
-  const { content } = tabsStyles()
-  return <TabsPrimitive.TabsContent className={content()} {...props} />
-}

package/src/components/tag.tsx

@@ -1,99 +0,0 @@
-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',
-  disabled = false,
-  ...props
-}: ComponentProps<'div'> &
-  ClassVariantProps<typeof tagVariants> & { disabled?: boolean }) {
-  return (
-    <div
-      className={cx(tagVariants({ variant }), className)}
-      data-disabled={disabled}
-      {...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:data-[disabled=false]: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/components/tooltip.tsx

@@ -1,63 +0,0 @@
-import * as TooltipPrimitive from '@radix-ui/react-tooltip'
-import { cx } from '@xjur-ui/util'
-
-function TooltipProvider({
-  delayDuration = 0,
-  ...props
-}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
-  return (
-    <TooltipPrimitive.Provider
-      data-slot="tooltip-provider"
-      delayDuration={delayDuration}
-      {...props}
-    />
-  )
-}
-
-function Tooltip({
-  ...props
-}: React.ComponentProps<typeof TooltipPrimitive.Root>) {
-  return (
-    <TooltipProvider>
-      <TooltipPrimitive.Root data-slot="tooltip" {...props} />
-    </TooltipProvider>
-  )
-}
-
-function TooltipTrigger({
-  ...props
-}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
-  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />
-}
-
-function TooltipContent({
-  className,
-  sideOffset = 1,
-  variant = 'simple',
-  children,
-  ...props
-}: React.ComponentProps<typeof TooltipPrimitive.Content> & {
-  variant?: 'simple' | 'rich'
-}) {
-  return (
-    <TooltipPrimitive.Portal>
-      <TooltipPrimitive.Content
-        className={cx(
-          'text-size-body-sm text-balance',
-          'data-[variant=simple]:bg-alt-2 data-[variant=simple]:text-neutral-label data-[variant=simple]:rounded-small-1x data-[variant=simple]:px-small data-[variant=simple]:py-small-1x',
-          'data-[variant=rich]:bg-layer-2-idle data-[variant=rich]:text-neutral-dark data-[variant=rich]:rounded-small data-[variant=rich]:border-border-layer-2 data-[variant=rich]:p-large data-[variant=rich]:border',
-          'animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin)',
-          className
-        )}
-        data-slot="tooltip-content"
-        data-variant={variant}
-        sideOffset={sideOffset}
-        {...props}
-      >
-        {children}
-      </TooltipPrimitive.Content>
-    </TooltipPrimitive.Portal>
-  )
-}
-
-export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }

package/src/components/typography.tsx

@@ -1,85 +0,0 @@
-import { Slot } from '@radix-ui/react-slot'
-import { cva, type ClassVariantProps } from '@xjur-ui/util'
-import { memo, type ComponentProps } from 'react'
-
-const typographyVariants = cva('', {
-  variants: {
-    variant: {
-      body: '',
-      label: '',
-      title: '',
-      headline: ''
-    },
-    size: {
-      'sm-2x': '',
-      'sm-1x': '',
-      sm: '',
-      md: '',
-      lg: ''
-    },
-    weight: {
-      thin: 'font-thin',
-      extraLight: 'font-extralight',
-      light: 'font-light',
-      normal: 'font-normal',
-      medium: 'font-medium',
-      semibold: 'font-semibold',
-      bold: 'font-bold',
-      extraBold: 'font-extrabold',
-      black: 'font-black'
-    }
-  },
-  compoundVariants: [
-    { variant: 'body', size: 'sm-1x', class: 'text-size-body-sm-1x' },
-    { variant: 'body', size: 'sm', class: 'text-size-body-sm' },
-    { variant: 'body', size: 'md', class: 'text-size-body-md' },
-    { variant: 'body', size: 'lg', class: 'text-size-body-lg' },
-
-    { variant: 'label', size: 'sm-2x', class: 'text-size-label-sm-2x' },
-    { variant: 'label', size: 'sm-1x', class: 'text-size-label-sm-1x' },
-    { variant: 'label', size: 'sm', class: 'text-size-label-sm' },
-    { variant: 'label', size: 'md', class: 'text-size-label-md' },
-    { variant: 'label', size: 'lg', class: 'text-size-label-lg' },
-
-    { variant: 'title', size: 'sm', class: 'text-size-title-sm' },
-    { variant: 'title', size: 'md', class: 'text-size-title-md' },
-    { variant: 'title', size: 'lg', class: 'text-size-title-lg' },
-
-    { variant: 'headline', size: 'sm', class: 'text-size-headline-sm' },
-    { variant: 'headline', size: 'md', class: 'text-size-headline-md' },
-    { variant: 'headline', size: 'lg', class: 'text-size-headline-lg' }
-  ],
-  defaultVariants: {
-    variant: 'body',
-    size: 'md',
-    weight: 'normal'
-  }
-})
-
-export interface TypographyProps
-  extends ComponentProps<'base'>,
-    ClassVariantProps<typeof typographyVariants> {
-  asChild?: boolean
-}
-
-export const Typography = memo(
-  ({
-    variant,
-    size,
-    weight,
-    asChild,
-    className,
-    ...props
-  }: TypographyProps) => {
-    const Component = asChild ? Slot : 'span'
-
-    return (
-      <Component
-        className={typographyVariants({ variant, size, weight, className })}
-        {...props}
-      />
-    )
-  }
-)
-
-Typography.displayName = 'Typography'