myshell-react-lib 0.1.0

package/src/components/toggle-group.tsx

@@ -0,0 +1,64 @@
+'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

@@ -0,0 +1,46 @@
+'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

@@ -0,0 +1,283 @@
+/* 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 };