@xjur-ui/react 2.1.0 → 2.2.0

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'