myshell-react-lib 0.1.4 → 0.1.6

package/src/components/toggle-group.tsx

@@ -1,64 +0,0 @@
-'use client';
-
-import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';
-import { type VariantProps } from 'class-variance-authority';
-import * as React from 'react';
-
-import { toggleVariants } from './toggle';
-import { cn } from '@/lib/utils';
-
-const ToggleGroupContext = React.createContext<
-  VariantProps<typeof toggleVariants>
->({
-  size: 'default',
-  variant: 'default',
-});
-
-const ToggleGroup = React.forwardRef<
-  React.ElementRef<typeof ToggleGroupPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Root> &
-    VariantProps<typeof toggleVariants>
->(({ className, variant, size, children, ...props }, ref) => (
-  <ToggleGroupPrimitive.Root
-    ref={ref}
-    className={cn(
-      'flex items-center justify-center gap-1 p-0.5 rounded-md border border-Colors-Border-Default bg-Colors-Background-Neutral-Primary-Default',
-      className
-    )}
-    {...props}
-  >
-    <ToggleGroupContext.Provider value={{ variant, size }}>
-      {children}
-    </ToggleGroupContext.Provider>
-  </ToggleGroupPrimitive.Root>
-));
-
-ToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName;
-
-const ToggleGroupItem = React.forwardRef<
-  React.ElementRef<typeof ToggleGroupPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Item> &
-    VariantProps<typeof toggleVariants>
->(({ className, children, variant, size, ...props }, ref) => {
-  const context = React.useContext(ToggleGroupContext);
-
-  return (
-    <ToggleGroupPrimitive.Item
-      ref={ref}
-      className={cn(
-        toggleVariants({
-          variant: context.variant || variant,
-          size: context.size || size,
-        }),
-        className
-      )}
-      {...props}
-    >
-      {children}
-    </ToggleGroupPrimitive.Item>
-  );
-});
-
-ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName;
-
-export { ToggleGroup, ToggleGroupItem };

package/src/components/toggle.tsx

@@ -1,46 +0,0 @@
-'use client';
-
-import * as TogglePrimitive from '@radix-ui/react-toggle';
-import { cva, type VariantProps } from 'class-variance-authority';
-import * as React from 'react';
-
-import { cn } from '@/lib/utils';
-
-const toggleVariants = cva(
-  'inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-white text-Colors-Text-Subtlest hover:bg-slate-100 hover:text-slate-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-950 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-Colors-Background-Normal-Primary-Active data-[state=on]:text-Colors-Text-Brand-Default [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 gap-2 dark:ring-offset-slate-950 dark:hover:bg-slate-800 dark:hover:text-Colors-Text-Brand-Default dark:focus-visible:ring-slate-300 dark:data-[state=on]:bg-Colors-Background-Normal-Primary-Active dark:data-[state=on]:text-Colors-Text-Brand-Default',
-  {
-    variants: {
-      variant: {
-        default: 'bg-transparent',
-        outline:
-          'border border-slate-200 bg-transparent hover:bg-slate-100 hover:text-slate-900 dark:border-slate-800 dark:hover:bg-slate-800 dark:hover:text-slate-50',
-      },
-      size: {
-        default: 'h-10 px-3 min-w-10',
-        sm: 'h-9 px-2.5 min-w-9',
-        lg: 'h-11 px-5 min-w-11',
-        xs: 'h-5 min-w-8 text-xs px-3',
-      },
-    },
-    defaultVariants: {
-      variant: 'default',
-      size: 'default',
-    },
-  }
-);
-
-const Toggle = React.forwardRef<
-  React.ElementRef<typeof TogglePrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root> &
-    VariantProps<typeof toggleVariants>
->(({ className, variant, size, ...props }, ref) => (
-  <TogglePrimitive.Root
-    ref={ref}
-    className={cn(toggleVariants({ variant, size, className }))}
-    {...props}
-  />
-));
-
-Toggle.displayName = TogglePrimitive.Root.displayName;
-
-export { Toggle, toggleVariants };

package/src/components/tooltip.tsx

@@ -1,283 +0,0 @@
-/* eslint-disable react/jsx-no-useless-fragment */
-
-'use client';
-
-import * as TooltipPrimitive from '@radix-ui/react-tooltip';
-import * as React from 'react';
-
-import { cn } from '@/lib/utils';
-
-import { Popover } from './popover';
-import { Description } from './typography';
-import { useMedia } from 'react-use';
-
-const TooltipProvider = TooltipPrimitive.Provider;
-
-const TooltipTrigger = TooltipPrimitive.Trigger;
-const TooltipArrow = TooltipPrimitive.Arrow;
-
-const Tooltip = React.forwardRef<
-  React.ElementRef<typeof TooltipPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Root> & {
-    /**
-     * 文案大小
-     */
-    size?: 'sm' | 'md';
-
-    /**
-     * 气泡是否打开
-     */
-    open?: boolean;
-    /**
-     * 气泡是否默认打开
-     */
-    defaultOpen?: boolean;
-    /**
-     * 气泡是否禁用
-     */
-    disabled?: boolean;
-    /**
-     * 气泡标题
-     */
-    title?: string;
-    /**
-     * 气泡标题是否危险
-     */
-    titleDangerous?: boolean;
-    /**
-     * 气泡描述
-     */
-    description?: string | React.ReactNode;
-    /**
-     * 气泡描述是否危险
-     */
-    descriptionDangerous?: boolean;
-    /**
-     * 气泡样式类型
-     *
-     *
-     * @default 'default'
-     */
-    variant?: 'default' | 'info' | 'message';
-    /**
-     * 气泡方向
-     *
-     * @default 'top'
-     */
-    side?: 'top' | 'right' | 'bottom' | 'left';
-    /**
-     * 气泡箭头位置
-     *
-     * @default 'center'
-     */
-    align?: 'start' | 'center' | 'end';
-    /**
-     * 内容偏移量
-     *
-     * @default 6
-     */
-    sideOffset?: number;
-    /**
-     * 箭头偏移量
-     *
-     * @default -2
-     */
-    alignOffset?: number;
-    /**
-     * 箭头样式
-     */
-    arrowClassName?: string;
-    /**
-     * 是否显示箭头
-     *
-     * @default true
-     */
-    showArrow?: boolean;
-    /**
-     * 内容样式
-     */
-    contentClassName?: string;
-    /**
-     * 触发器样式
-     */
-    triggerClassName?: string;
-  }
->(
-  (
-    {
-      open,
-      defaultOpen,
-      disabled = false,
-      children,
-      title,
-      description,
-      size = 'sm',
-      titleDangerous = false,
-      descriptionDangerous = false,
-      contentClassName,
-      triggerClassName,
-      ...props
-    },
-    ref
-  ) => {
-    const isDesktop = !useMedia('(max-width: 768px)');
-    const defaultTitleColor =
-      props.variant === 'message'
-        ? 'static'
-        : props.variant === 'default'
-        ? 'warning-bolder'
-        : 'default';
-    const defaultDescColor =
-      props.variant === 'message'
-        ? 'static'
-        : props.variant === 'info'
-        ? 'warning-bolder'
-        : 'default';
-
-    if (disabled) {
-      return <>{children}</>;
-    }
-    return (
-      <>
-        {isDesktop ? (
-          <TooltipProvider>
-            <TooltipPrimitive.Root
-              open={disabled || (!description && !title) ? false : open}
-              defaultOpen={defaultOpen}
-            >
-              <TooltipTrigger asChild>
-                <div className={cn('cursor-pointer', triggerClassName)}>
-                  {children}
-                </div>
-              </TooltipTrigger>
-              <TooltipContent ref={ref} className={contentClassName} {...props}>
-                {title && (
-                  <p className="mb-1">
-                    <Description
-                      size="lg"
-                      weight="medium"
-                      color={defaultTitleColor}
-                      dangerous={titleDangerous}
-                      className={cn(
-                        'text-wrap text-inherit',
-                        size === 'md' && 'text-sm'
-                      )}
-                    >
-                      {title}
-                    </Description>
-                  </p>
-                )}
-                {description && (
-                  <Description
-                    size="lg"
-                    weight={title ? 'regular' : 'medium'}
-                    color={title ? 'subtle' : defaultDescColor}
-                    dangerous={descriptionDangerous}
-                    className={cn(
-                      'text-wrap text-inherit',
-                      size === 'md' && 'text-sm'
-                    )}
-                  >
-                    {description}
-                  </Description>
-                )}
-              </TooltipContent>
-            </TooltipPrimitive.Root>
-          </TooltipProvider>
-        ) : (
-          <Popover
-            open={open}
-            title={title}
-            content={description}
-            disabled={disabled}
-            triggerClassName={triggerClassName}
-            className={cn(contentClassName, size === 'md' && 'text-sm')}
-            isMTooltip
-            {...props}
-          >
-            {children}
-          </Popover>
-        )}
-      </>
-    );
-  }
-);
-Tooltip.displayName = TooltipPrimitive.Root.displayName;
-
-const TooltipContent = React.forwardRef<
-  React.ElementRef<typeof TooltipPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content> & {
-    showArrow?: boolean;
-    variant?: 'default' | 'info' | 'message';
-    /**
-     * 气泡方向
-     */
-    side?: 'top' | 'right' | 'bottom' | 'left';
-    /**
-     * 气泡箭头位置
-     *
-     */
-    align?: 'start' | 'center' | 'end';
-
-    /**
-     * 箭头样式
-     */
-    arrowClassName?: string;
-  }
->(
-  (
-    {
-      className,
-      variant = 'default',
-      align = 'center',
-      side = 'top',
-      sideOffset = 6,
-      alignOffset = 0,
-      showArrow = true,
-      arrowClassName,
-      ...props
-    },
-    ref
-  ) => (
-    <TooltipPrimitive.Content
-      ref={ref}
-      align={align}
-      sideOffset={sideOffset}
-      alignOffset={alignOffset}
-      side={side}
-      className={cn(
-        'relative z-[49] mx-4 w-fit max-w-72 rounded-lg px-3 py-2 text-left text-xs shadow-modal-bolder',
-        'outline-none delay-0 data-[state=open]:animate-in data-[state=open]:fade-in-0 [&[data-state=open]>span]:animate-none',
-        'data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 [&[data-state=delayed-open]>span]:animate-none',
-        'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-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',
-        variant === 'default'
-          ? 'bg-cc-Tooltip-bg-default text-cc-Tooltip-fg-default border border-cc-Tooltip-border-default'
-          : variant === 'info'
-          ? 'bg-surface-accent-yellow-subtle text-Colors-Text-Warning-Bolder'
-          : 'bg-Colors-Utility-Lake-Blue-50 text-cc-Tooltip-fg-default',
-        className
-      )}
-      {...props}
-    >
-      {props.children}
-      {showArrow && (
-        <TooltipArrow
-          width={12}
-          height={6}
-          className={cn(
-            variant === 'default'
-              ? 'fill-cc-Tooltip-bg-default stroke-cc-Tooltip-border-default -ml-[0.5px]'
-              : variant === 'info'
-              ? 'fill-surface-accent-yellow-subtle'
-              : 'fill-Colors-Utility-Lake-Blue-50',
-            arrowClassName
-          )}
-        />
-      )}
-    </TooltipPrimitive.Content>
-  )
-);
-TooltipContent.displayName = TooltipPrimitive.Content.displayName;
-
-export { Tooltip, TooltipProvider };