myshell-react-lib 0.1.0

package/src/components/sheet.tsx

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

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

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

@@ -0,0 +1,48 @@
+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;
+}
+
+export default function Spinner(props: SpinnerProps) {
+  const { size, speed, color, className } = props;
+
+  return (
+    <Loader2
+      className={cn(spinnerVariants({ size, speed, color }), className)}
+    />
+  );
+}

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

@@ -0,0 +1,88 @@
+.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;
+  }
+}