myshell-react-lib 0.1.5 → 0.1.7

package/src/components/sheet.tsx

@@ -1,143 +0,0 @@
-'use client';
-
-import * as SheetPrimitive from '@radix-ui/react-dialog';
-import { cva, type VariantProps } from 'class-variance-authority';
-import { X } from 'lucide-react';
-import * as React from 'react';
-
-import { cn } from '@/lib/utils';
-
-const Sheet = SheetPrimitive.Root;
-
-const SheetTrigger = SheetPrimitive.Trigger;
-
-const SheetClose = SheetPrimitive.Close;
-
-const SheetPortal = SheetPrimitive.Portal;
-
-const SheetOverlay = React.forwardRef<
-  React.ElementRef<typeof SheetPrimitive.Overlay>,
-  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>
->(({ className, ...props }, ref) => (
-  <SheetPrimitive.Overlay
-    className={cn(
-      'fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
-      className
-    )}
-    {...props}
-    ref={ref}
-  />
-));
-SheetOverlay.displayName = SheetPrimitive.Overlay.displayName;
-
-const sheetVariants = cva(
-  'fixed z-50 gap-4 bg-white p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500 dark:bg-slate-950',
-  {
-    variants: {
-      side: {
-        top: 'inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top',
-        bottom:
-          'inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom',
-        left: 'inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm',
-        right:
-          'inset-y-0 right-0 h-full w-3/4  border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm',
-      },
-    },
-    defaultVariants: {
-      side: 'right',
-    },
-  }
-);
-
-interface SheetContentProps
-  extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
-    VariantProps<typeof sheetVariants> {}
-
-const SheetContent = React.forwardRef<
-  React.ElementRef<typeof SheetPrimitive.Content>,
-  SheetContentProps
->(({ side = 'right', className, children, ...props }, ref) => (
-  <SheetPortal>
-    <SheetOverlay />
-    <SheetPrimitive.Content
-      ref={ref}
-      className={cn(sheetVariants({ side }), className)}
-      {...props}
-    >
-      {children}
-      <SheetPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-white transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-slate-950 focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-slate-100 dark:ring-offset-slate-950 dark:focus:ring-slate-300 dark:data-[state=open]:bg-slate-800">
-        <X className="h-4 w-4" />
-        <span className="sr-only">Close</span>
-      </SheetPrimitive.Close>
-    </SheetPrimitive.Content>
-  </SheetPortal>
-));
-SheetContent.displayName = SheetPrimitive.Content.displayName;
-
-const SheetHeader = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
-    className={cn(
-      'flex flex-col space-y-2 text-center sm:text-left',
-      className
-    )}
-    {...props}
-  />
-);
-SheetHeader.displayName = 'SheetHeader';
-
-const SheetFooter = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
-    className={cn(
-      'flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2',
-      className
-    )}
-    {...props}
-  />
-);
-SheetFooter.displayName = 'SheetFooter';
-
-const SheetTitle = React.forwardRef<
-  React.ElementRef<typeof SheetPrimitive.Title>,
-  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>
->(({ className, ...props }, ref) => (
-  <SheetPrimitive.Title
-    ref={ref}
-    className={cn(
-      'text-lg font-semibold text-slate-950 dark:text-slate-50',
-      className
-    )}
-    {...props}
-  />
-));
-SheetTitle.displayName = SheetPrimitive.Title.displayName;
-
-const SheetDescription = React.forwardRef<
-  React.ElementRef<typeof SheetPrimitive.Description>,
-  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>
->(({ className, ...props }, ref) => (
-  <SheetPrimitive.Description
-    ref={ref}
-    className={cn('text-sm text-slate-500 dark:text-slate-400', className)}
-    {...props}
-  />
-));
-SheetDescription.displayName = SheetPrimitive.Description.displayName;
-
-export {
-  Sheet,
-  SheetPortal,
-  SheetOverlay,
-  SheetTrigger,
-  SheetClose,
-  SheetContent,
-  SheetHeader,
-  SheetFooter,
-  SheetTitle,
-  SheetDescription,
-};

package/src/components/skeleton.tsx

@@ -1,20 +0,0 @@
-import { cn } from '@/lib/utils';
-
-function Skeleton({
-  className,
-  animate = true,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement> & { animate?: boolean }) {
-  return (
-    <div
-      className={cn(
-        'rounded-md bg-Colors-Background-Normal-Secondary-Default',
-        className,
-        animate && 'animate-pulse'
-      )}
-      {...props}
-    />
-  );
-}
-
-export { Skeleton };

package/src/components/slider.tsx

@@ -1,160 +0,0 @@
-'use client';
-
-import * as SliderPrimitive from '@radix-ui/react-slider';
-import * as React from 'react';
-import { ClassNameValue } from 'tailwind-merge';
-
-import { cn } from '@/lib/utils';
-
-import { NumberInput } from './number-input';
-
-type Size = 'sm' | 'lg';
-const Slider = React.forwardRef<
-  React.ElementRef<typeof SliderPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root> & {
-    size?: Size;
-  }
->(({ className, size = 'lg', ...props }, ref) => (
-  <div className="w-full p-3 flex justify-center items-center h-10 rounded-lg	border border-Colors-Border-Default bg-Colors-Background-Normal-Primary-Active shadow-background-default text-sm text-Colors-Text-Default ring-offset-cc-Focus-Rings-Brand-default hover:border-hovered hover:bg-surface-subtle aria-[invalid=true]:border-critical aria-[invalid=true]:hover:border-Colors-Border-Critical aria-[invalid=true]:hover:bg-surface-accent-red-subtlest aria-[invalid=true]:focus-visible:ring-error file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-Colors-Text-Subtler focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-cc-Focus-Rings-Brand-default focus-visible:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-30">
-    <SliderPrimitive.Root
-      ref={ref}
-      className={cn(
-        'relative flex w-full touch-none select-none items-center',
-        className
-      )}
-      {...props}
-    >
-      <SliderPrimitive.Track
-        className={cn(
-          'relative w-full grow overflow-hidden rounded-full bg-Colors-Background-Neutral-Primary-Hover data-[disabled]:opacity-30',
-          size === 'sm' ? 'h-0.5' : 'h-1.5'
-        )}
-      >
-        <SliderPrimitive.Range className="absolute h-full bg-Colors-Background-Brand-Default data-[disabled]:opacity-30" />
-      </SliderPrimitive.Track>
-      <SliderPrimitive.Thumb
-        className={cn(
-          'block rounded-full border-Colors-Utility-Lake-Blue-40 bg-Colors-Background-Normal-Primary-Default ring-offset-cc-Focus-Rings-Brand-default transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-cc-Focus-Rings-Brand-default focus-visible:ring-offset-1 data-[disabled]:pointer-events-none data-[disabled]:opacity-30',
-          size === 'sm' ? 'w-2 h-2 border-[1.5px]' : 'w-5 h-5 border-[3px]'
-        )}
-      />
-    </SliderPrimitive.Root>
-  </div>
-));
-Slider.displayName = SliderPrimitive.Root.displayName;
-
-interface ISliderBaseProps
-  extends React.RefAttributes<HTMLSpanElement>,
-    Omit<
-      SliderPrimitive.SliderProps,
-      'value' | 'defaultValue' | 'onValueChange' | 'onValueCommit'
-    > {}
-
-interface ISliderSingleProps extends ISliderBaseProps {
-  size?: Size;
-  value?: number;
-  defaultValue?: number;
-  onValueChange?: (value: number) => void;
-  onValueCommit?: (value: number) => void;
-  // 是否展示输入框设置器
-  settable?: boolean;
-  // 容器样式
-  containerClassName?: ClassNameValue;
-  // 轨道样式
-  trackClassName?: ClassNameValue;
-  // 已选范围样式
-  rangeClassName?: ClassNameValue;
-  // 滑块样式
-  thumbClassName?: ClassNameValue;
-}
-
-const SliderSingle = React.forwardRef<
-  React.ElementRef<React.ForwardRefExoticComponent<ISliderSingleProps>>,
-  React.ComponentPropsWithoutRef<
-    React.ForwardRefExoticComponent<ISliderSingleProps>
-  >
->(
-  (
-    {
-      className,
-      containerClassName,
-      trackClassName,
-      rangeClassName,
-      thumbClassName,
-      size = 'lg',
-      value,
-      defaultValue,
-      onValueChange,
-      onValueCommit,
-      settable = true,
-      ...props
-    },
-    ref
-  ) => (
-    <div className="flex w-full items-center space-x-1.5">
-      <div
-        className={cn(
-          'w-full p-3 flex justify-center items-center h-10 rounded-lg border border-Colors-Border-Default bg-Colors-Background-Normal-Primary-Active shadow-background-default text-sm text-Colors-Text-Default ring-offset-cc-Focus-Rings-Brand-default hover:border-hovered hover:bg-surface-subtle aria-[invalid=true]:border-critical aria-[invalid=true]:hover:border-Colors-Border-Critical aria-[invalid=true]:hover:bg-surface-accent-red-subtlest aria-[invalid=true]:focus-visible:ring-error file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-Colors-Text-Subtler focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-cc-Focus-Rings-Brand-default focus-visible:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-30',
-          containerClassName
-        )}
-      >
-        <SliderPrimitive.Root
-          ref={ref}
-          className={cn(
-            'relative flex w-full touch-none select-none items-center',
-            className
-          )}
-          value={typeof value === 'number' ? [value] : value}
-          defaultValue={
-            typeof defaultValue === 'number' ? [defaultValue] : defaultValue
-          }
-          onValueChange={(rootValue: number[]) =>
-            onValueChange?.(rootValue?.[0])
-          }
-          onValueCommit={(rootValue: number[]) =>
-            onValueCommit?.(rootValue?.[0])
-          }
-          {...props}
-        >
-          <SliderPrimitive.Track
-            className={cn(
-              'relative w-full grow overflow-hidden rounded-full bg-Colors-Background-Neutral-Primary-Hover data-[disabled]:opacity-30',
-              size === 'sm' ? 'h-0.5' : 'h-1.5',
-              trackClassName
-            )}
-          >
-            <SliderPrimitive.Range
-              className={cn(
-                'absolute h-full bg-Colors-Background-Brand-Default data-[disabled]:opacity-30',
-                rangeClassName
-              )}
-            />
-          </SliderPrimitive.Track>
-          <SliderPrimitive.Thumb
-            className={cn(
-              'cursor-pointer block rounded-full border-Colors-Utility-Lake-Blue-40 bg-Colors-Background-Normal-Primary-Default ring-offset-cc-Focus-Rings-Brand-default transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-cc-Focus-Rings-Brand-default focus-visible:ring-offset-1 data-[disabled]:pointer-events-none data-[disabled]:opacity-30',
-              size === 'sm' ? 'w-2 h-2 border-[1.5px]' : 'w-5 h-5 border-[3px]',
-              thumbClassName
-            )}
-          />
-        </SliderPrimitive.Root>
-      </div>
-      {settable && (
-        <div className="flex-shrink-0 w-14 h-9 flex justify-center items-center rounded-lg">
-          <NumberInput
-            value={value}
-            min={props?.min}
-            max={props?.max}
-            step={props?.step}
-            controls={false}
-            defaultValue={defaultValue}
-            onChange={(e) => onValueChange?.(Number(e.target.value))}
-          />
-        </div>
-      )}
-    </div>
-  )
-);
-SliderSingle.displayName = 'SliderSingle';
-
-export { Slider, SliderSingle };

package/src/components/spinner.tsx

@@ -1,50 +0,0 @@
-import { VariantProps, cva } from 'class-variance-authority';
-import { Loader2 } from 'lucide-react';
-import { ClassNameValue } from 'tailwind-merge';
-
-import { cn } from '@/lib/utils';
-
-const spinnerVariants = cva('animate-spin', {
-  variants: {
-    size: {
-      '2xs': 'h-3.5 w-3.5',
-      xs: 'h-4 w-4',
-      sm: 'h-5 w-5',
-      md: 'h-6 w-6',
-      xl: 'h-7 w-7',
-      lg: 'h-9 w-9',
-    },
-    speed: {
-      slow: 'duration-2000',
-      default: 'duration-600',
-      fast: 'duration-500',
-    },
-    color: {
-      default: 'text-Colors-Text-Default',
-      brand: 'text-Colors-Text-Brand-Default',
-      static: 'text-Colors-Text-Static-White',
-      warning: 'text-Colors-Text-Warning-Default',
-      success: 'text-Colors-Text-Success-Default',
-    },
-  },
-  defaultVariants: {
-    size: 'md',
-    speed: 'default',
-    color: 'default',
-  },
-});
-interface SpinnerProps extends VariantProps<typeof spinnerVariants> {
-  className?: ClassNameValue;
-}
-
-function Spinner(props: SpinnerProps) {
-  const { size, speed, color, className } = props;
-
-  return (
-    <Loader2
-      className={cn(spinnerVariants({ size, speed, color }), className)}
-    />
-  );
-}
-
-export { Spinner };

package/src/components/swiper/index.module.scss

@@ -1,88 +0,0 @@
-.swiperBox{
-  @apply w-full h-fit;
-  
-  :global(.swiper) {
-    :global(.swiper-button-prev){
-      @apply bg-contain bg-no-repeat;
-      background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0iIzQxNDM0NSIgY2xhc3M9InNpemUtNSI+CiAgPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNMTEuNzggNS4yMmEuNzUuNzUgMCAwIDEgMCAxLjA2TDguMDYgMTBsMy43MiAzLjcyYS43NS43NSAwIDEgMS0xLjA2IDEuMDZsLTQuMjUtNC4yNWEuNzUuNzUgMCAwIDEgMC0xLjA2bDQuMjUtNC4yNWEuNzUuNzUgMCAwIDEgMS4wNiAwWiIgY2xpcC1ydWxlPSJldmVub2RkIiAvPgo8L3N2Zz4K'); 
-    }
-    :global(.swiper-button-next){
-      @apply bg-contain bg-no-repeat;
-      background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0iIzQxNDM0NSIgY2xhc3M9InNpemUtNSI+CiAgPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNOC4yMiA1LjIyYS43NS43NSAwIDAgMSAxLjA2IDBsNC4yNSA0LjI1YS43NS43NSAwIDAgMSAwIDEuMDZsLTQuMjUgNC4yNWEuNzUuNzUgMCAwIDEtMS4wNi0xLjA2TDExLjk0IDEwIDguMjIgNi4yOGEuNzUuNzUgMCAwIDEgMC0xLjA2WiIgY2xpcC1ydWxlPSJldmVub2RkIiAvPgo8L3N2Zz4KCg=='); 
-    }
-    :global(.swiper-button-prev::after){
-      @apply text-icon content-none;
-    }
-    :global(.swiper-button-next::after){
-      @apply text-icon content-none;
-    }
-  }
-  :global(.swiper.banner-swiper) {
-    :global(.banner-swiper-slide.swiper-slide-prev) {
-      // transform: scale(0.8);
-      @apply origin-right;
-    }
-    :global(.banner-swiper-slide.swiper-slide-next) {
-      // transform: scale(0.8);
-      @apply origin-left;
-    }
-    :global(.swiper-slide-active) {
-      @apply opacity-100;
-      // transform: scale(1) translateX(0);
-    }
-    :global(.swiper-button-next){
-      @apply -right-4 md:right-0 3xl:right-[calc((100%-1200px)/2-16px)];
-    }
-    :global(.swiper-button-prev){
-      @apply -left-4 md:left-0 3xl:left-[calc((100%-1200px)/2-16px)];
-    }
-  }
-  :global(.swiper.feature-swiper) {
-    :global(.swiper-button-next){
-      @apply right-0;
-    }
-    :global(.swiper-button-prev){
-      @apply left-0;
-    }
-    :global(.swiper-button-disabled) {
-      @apply hidden;
-    }
-  }
-  :global(.swiper.patron-badge-swiper) {
-    :global(.swiper-button-next){
-      @apply right-0;
-    }
-    :global(.swiper-button-prev){
-      @apply left-0;
-    }
-    :global(.swiper-button-disabled) {
-      @apply hidden;
-    }
-  }
-  :global(.swiper.grid-swiper) {
-    :global(.swiper-wrapper) {
-      @apply w-[100vw] md:w-full flex-wrap flex-col m-0;
-    }
-  }
-  :global(.swiper) {
-    
-    :global(.swiper-button-next){
-      @apply hidden md:flex justify-center items-center absolute top-[50%] w-8 h-8 font-semibold text-icon border border-Colors-Border-Default bg-Colors-Background-Normal-Primary-Default rounded-full cursor-pointer hover:bg-surface-hovered active:bg-Colors-Background-Normal-Primary-Active;
-        &::after {
-          @apply text-icon text-xs font-bold;
-        }
-      }
-    :global(.swiper-button-prev){
-      @apply hidden md:flex justify-center items-center absolute top-[50%] w-8 h-8 font-semibold text-icon border border-Colors-Border-Default bg-Colors-Background-Normal-Primary-Default rounded-full cursor-pointer hover:bg-surface-hovered active:bg-Colors-Background-Normal-Primary-Active;
-        &::after {
-          @apply text-icon text-xs font-bold;
-      }
-    }
-  }
-}
-
-.animate {
-  :global(.swiper-slide) {
-    transition: transform 500ms linear;
-  }
-}