@shopify/shop-minis-react 0.0.14 → 0.0.17

package/src/base.css

@@ -1,273 +0,0 @@
-@import 'tailwindcss';
-@import 'tw-animate-css';
-
-@custom-variant dark (&:is(.dark *));
-
-@theme inline {
-  --radius-sm: calc(var(--radius) - 4px);
-  --radius-md: calc(var(--radius) - 2px);
-  --radius-lg: var(--radius);
-  --radius-xl: calc(var(--radius) + 4px);
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
-  --color-card: var(--card);
-  --color-card-foreground: var(--card-foreground);
-  --color-popover: var(--popover);
-  --color-popover-foreground: var(--popover-foreground);
-  --color-primary: var(--primary);
-  --color-primary-foreground: var(--primary-foreground);
-  --color-secondary: var(--secondary);
-  --color-secondary-foreground: var(--secondary-foreground);
-  --color-muted: var(--muted);
-  --color-muted-foreground: var(--muted-foreground);
-  --color-accent: var(--accent);
-  --color-accent-foreground: var(--accent-foreground);
-  --color-destructive: var(--destructive);
-  --color-border: var(--border);
-  --color-input: var(--input);
-  --color-ring: var(--ring);
-  --color-chart-1: var(--chart-1);
-  --color-chart-2: var(--chart-2);
-  --color-chart-3: var(--chart-3);
-  --color-chart-4: var(--chart-4);
-  --color-chart-5: var(--chart-5);
-  --color-sidebar: var(--sidebar);
-  --color-sidebar-foreground: var(--sidebar-foreground);
-  --color-sidebar-primary: var(--sidebar-primary);
-  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
-  --color-sidebar-accent: var(--sidebar-accent);
-  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
-  --color-sidebar-border: var(--sidebar-border);
-  --color-sidebar-ring: var(--sidebar-ring);
-
-  /* Palette colors for Tailwind */
-  --color-purple-d80: var(--purple-d80);
-  --color-purple-d60: var(--purple-d60);
-  --color-purple-d50: var(--purple-d50);
-  --color-purple-p40: var(--purple-p40);
-  --color-purple-l30: var(--purple-l30);
-  --color-purple-l20: var(--purple-l20);
-  --color-purple-l10: var(--purple-l10);
-  --color-purple-l5: var(--purple-l5);
-  --color-purple-l2: var(--purple-l2);
-
-  --color-grayscale-d100: var(--grayscale-d100);
-  --color-grayscale-d93: var(--grayscale-d93);
-  --color-grayscale-d90: var(--grayscale-d90);
-  --color-grayscale-d80: var(--grayscale-d80);
-  --color-grayscale-d70: var(--grayscale-d70);
-  --color-grayscale-d60: var(--grayscale-d60);
-  --color-grayscale-d50: var(--grayscale-d50);
-  --color-grayscale-l40: var(--grayscale-l40);
-  --color-grayscale-l20: var(--grayscale-l20);
-  --color-grayscale-l10: var(--grayscale-l10);
-  --color-grayscale-l6: var(--grayscale-l6);
-  --color-grayscale-l5: var(--grayscale-l5);
-  --color-grayscale-l0: var(--grayscale-l0);
-
-  --color-green-d90: var(--green-d90);
-  --color-green-d80: var(--green-d80);
-  --color-green-d70: var(--green-d70);
-  --color-green-l30: var(--green-l30);
-  --color-green-l20: var(--green-l20);
-  --color-green-l10: var(--green-l10);
-  --color-green-l5: var(--green-l5);
-
-  --color-poppy-d80: var(--poppy-d80);
-  --color-poppy-d70: var(--poppy-d70);
-  --color-poppy-d50: var(--poppy-d50);
-  --color-poppy-l40: var(--poppy-l40);
-  --color-poppy-l20: var(--poppy-l20);
-  --color-poppy-l10: var(--poppy-l10);
-  --color-poppy-l4: var(--poppy-l4);
-
-  --color-ochre-d90: var(--ochre-d90);
-  --color-ochre-d70: var(--ochre-d70);
-  --color-ochre-d60: var(--ochre-d60);
-  --color-ochre-l50: var(--ochre-l50);
-  --color-ochre-l30: var(--ochre-l30);
-  --color-ochre-l20: var(--ochre-l20);
-  --color-ochre-l10: var(--ochre-l10);
-  --color-ochre-l6: var(--ochre-l6);
-
-  --color-brand-aqua: var(--brand-aqua);
-  --color-brand-violet: var(--brand-violet);
-  --color-brand-magenta: var(--brand-magenta);
-  --color-brand-olive: var(--brand-olive);
-  --color-brand-lime: var(--brand-lime);
-  --color-brand-sage: var(--brand-sage);
-  --color-brand-sand: var(--brand-sand);
-}
-
-:root {
-  --radius: 0.65rem;
-
-  /* Palette Colors - Purple */
-  --purple-d80: #1b163b;
-  --purple-d60: #322c7d;
-  --purple-d50: #4524db;
-  --purple-p40: #5433eb;
-  --purple-l30: #6445ed;
-  --purple-l20: #9c83f8;
-  --purple-l10: #dbd1ff;
-  --purple-l5: #eeeaff;
-  --purple-l2: #f7f5ff;
-
-  /* Palette Colors - Grayscale */
-  --grayscale-d100: #000000;
-  --grayscale-d93: #121212;
-  --grayscale-d90: #1a1a1a;
-  --grayscale-d80: #2a2a2a;
-  --grayscale-d70: #404040;
-  --grayscale-d60: #656667;
-  --grayscale-d50: #6f7071;
-  --grayscale-l40: #a6a8a9;
-  --grayscale-l20: #c9cbcc;
-  --grayscale-l10: #e1e4e5;
-  --grayscale-l6: #eef0f1;
-  --grayscale-l5: #f2f4f5;
-  --grayscale-l0: #ffffff;
-
-  /* Palette Colors - Green */
-  --green-d90: #002e24;
-  --green-d80: #004839;
-  --green-d70: #008552;
-  --green-l30: #92d08d;
-  --green-l20: #baebcb;
-  --green-l10: #d2f2de;
-  --green-l5: #e4f6eb;
-
-  /* Palette Colors - Poppy */
-  --poppy-d80: #481609;
-  --poppy-d70: #832711;
-  --poppy-d50: #d92a0f;
-  --poppy-l40: #f05d38;
-  --poppy-l20: #ff967d;
-  --poppy-l10: #ffd2c2;
-  --poppy-l4: #ffece9;
-
-  /* Palette Colors - Ochre */
-  --ochre-d90: #443600;
-  --ochre-d70: #8c6e01;
-  --ochre-d60: #c29d05;
-  --ochre-l50: #e3be2b;
-  --ochre-l30: #f8db67;
-  --ochre-l20: #ffec9f;
-  --ochre-l10: #fff4cb;
-  --ochre-l6: #fff9e2;
-
-  /* Palette Colors - Brand */
-  --brand-aqua: #8dc0c6;
-  --brand-violet: #a327c2;
-  --brand-magenta: #d354ff;
-  --brand-olive: #8b8f01;
-  --brand-lime: #c7de00;
-  --brand-sage: #d8e59d;
-  --brand-sand: #f4f4ed;
-
-  /* Semantic Colors */
-  --background: var(--grayscale-l0);
-  --foreground: var(--grayscale-d100);
-  --card: var(--grayscale-l0);
-  --card-foreground: var(--grayscale-d100);
-  --popover: var(--grayscale-l0);
-  --popover-foreground: var(--grayscale-d100);
-  --primary: var(--purple-p40);
-  --primary-foreground: var(--grayscale-l0);
-  --secondary: var(--grayscale-l5);
-  --secondary-foreground: var(--grayscale-d70);
-  --muted: var(--grayscale-l5);
-  --muted-foreground: var(--grayscale-d70);
-  --accent: var(--grayscale-l5);
-  --accent-foreground: var(--grayscale-d70);
-  --destructive: var(--poppy-d50);
-  --border: rgba(0, 0, 0, 0.1);
-  --input: var(--grayscale-l20);
-  --ring: var(--purple-p40);
-  --chart-1: var(--ochre-d90);
-  --chart-2: var(--green-d70);
-  --chart-3: var(--green-l30);
-  --chart-4: var(--grayscale-d50);
-  --chart-5: var(--green-l20);
-  --sidebar: var(--grayscale-l5);
-  --sidebar-foreground: var(--grayscale-d100);
-  --sidebar-primary: var(--purple-p40);
-  --sidebar-primary-foreground: var(--purple-l20);
-  --sidebar-accent: var(--grayscale-l5);
-  --sidebar-accent-foreground: var(--grayscale-d70);
-  --sidebar-border: rgba(0, 0, 0, 0.1);
-  --sidebar-ring: var(--purple-p40);
-}
-
-.dark {
-  /* Dark mode semantic colors */
-  --background: var(--grayscale-d93);
-  --foreground: var(--grayscale-l0);
-  --card: var(--grayscale-d93);
-  --card-foreground: var(--grayscale-l0);
-  --popover: var(--grayscale-d93);
-  --popover-foreground: var(--grayscale-l0);
-  --primary: var(--purple-l20);
-  --primary-foreground: var(--grayscale-d100);
-  --secondary: var(--grayscale-d80);
-  --secondary-foreground: var(--grayscale-l0);
-  --muted: var(--grayscale-d80);
-  --muted-foreground: var(--grayscale-l20);
-  --accent: var(--grayscale-d80);
-  --accent-foreground: var(--grayscale-l0);
-  --destructive: var(--poppy-l40);
-  --border: rgba(255, 255, 255, 0.2);
-  --input: var(--grayscale-l40);
-  --ring: var(--purple-l20);
-  --chart-1: var(--green-l30);
-  --chart-2: var(--grayscale-d60);
-  --chart-3: var(--green-l20);
-  --chart-4: var(--grayscale-d60);
-  --chart-5: var(--ochre-l30);
-  --sidebar: var(--grayscale-d80);
-  --sidebar-foreground: var(--grayscale-l0);
-  --sidebar-primary: var(--purple-l20);
-  --sidebar-primary-foreground: var(--purple-l10);
-  --sidebar-accent: var(--grayscale-d80);
-  --sidebar-accent-foreground: var(--grayscale-l0);
-  --sidebar-border: rgba(255, 255, 255, 0.2);
-  --sidebar-ring: var(--purple-l20);
-}
-
-@layer base {
-  * {
-    @apply border-border outline-ring/50;
-  }
-  body {
-    @apply bg-background text-foreground;
-  }
-}
-
-html,
-body {
-  touch-action: manipulation;
-}
-
-/* Disable text selection */
-body {
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-}
-
-/* Re-enable text selection for input fields */
-input,
-textarea {
-  -webkit-user-select: text;
-  -moz-user-select: text;
-  -ms-user-select: text;
-  user-select: text;
-}
-
-/* Disable image drag */
-img,
-.no-drag {
-  -webkit-user-drag: none;
-  user-drag: none;
-}

package/src/components/atoms/alert-dialog.tsx

@@ -1,151 +0,0 @@
-import * as React from 'react'
-
-import {AlertDialog as AlertDialogPrimitive} from 'radix-ui'
-
-import {cn} from '../../lib/utils'
-
-import {buttonVariants} from './button'
-
-function AlertDialog({
-  ...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Root>) {
-  return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />
-}
-
-function AlertDialogTrigger({
-  ...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>) {
-  return (
-    <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />
-  )
-}
-
-function AlertDialogPortal({
-  ...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Portal>) {
-  return (
-    <AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />
-  )
-}
-
-function AlertDialogOverlay({
-  className,
-  ...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>) {
-  return (
-    <AlertDialogPrimitive.Overlay
-      data-slot="alert-dialog-overlay"
-      className={cn(
-        'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50',
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function AlertDialogContent({
-  className,
-  ...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Content>) {
-  return (
-    <AlertDialogPortal>
-      <AlertDialogOverlay />
-      <AlertDialogPrimitive.Content
-        data-slot="alert-dialog-content"
-        className={cn(
-          'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg',
-          className
-        )}
-        {...props}
-      />
-    </AlertDialogPortal>
-  )
-}
-
-function AlertDialogHeader({className, ...props}: React.ComponentProps<'div'>) {
-  return (
-    <div
-      data-slot="alert-dialog-header"
-      className={cn('flex flex-col gap-2 text-center sm:text-left', className)}
-      {...props}
-    />
-  )
-}
-
-function AlertDialogFooter({className, ...props}: React.ComponentProps<'div'>) {
-  return (
-    <div
-      data-slot="alert-dialog-footer"
-      className={cn(
-        'flex flex-col-reverse gap-2 sm:flex-row sm:justify-end',
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function AlertDialogTitle({
-  className,
-  ...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {
-  return (
-    <AlertDialogPrimitive.Title
-      data-slot="alert-dialog-title"
-      className={cn('text-lg font-semibold', className)}
-      {...props}
-    />
-  )
-}
-
-function AlertDialogDescription({
-  className,
-  ...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {
-  return (
-    <AlertDialogPrimitive.Description
-      data-slot="alert-dialog-description"
-      className={cn('text-muted-foreground text-sm', className)}
-      {...props}
-    />
-  )
-}
-
-function AlertDialogAction({
-  className,
-  ...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Action>) {
-  return (
-    <AlertDialogPrimitive.Action
-      className={cn(buttonVariants(), className)}
-      {...props}
-    />
-  )
-}
-
-function AlertDialogCancel({
-  className,
-  ...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Cancel>) {
-  return (
-    <AlertDialogPrimitive.Cancel
-      className={cn(buttonVariants({variant: 'outlined'}), className)}
-      {...props}
-    />
-  )
-}
-
-export {
-  AlertDialog,
-  AlertDialogPortal,
-  AlertDialogOverlay,
-  AlertDialogTrigger,
-  AlertDialogContent,
-  AlertDialogHeader,
-  AlertDialogFooter,
-  AlertDialogTitle,
-  AlertDialogDescription,
-  AlertDialogAction,
-  AlertDialogCancel,
-}

package/src/components/atoms/carousel.tsx

@@ -1,241 +0,0 @@
-'use client'
-
-import * as React from 'react'
-
-import useEmblaCarousel, {type UseEmblaCarouselType} from 'embla-carousel-react'
-import {ArrowLeft, ArrowRight} from 'lucide-react'
-
-import {cn} from '../../lib/utils'
-
-import {Button} from './button'
-
-type CarouselApi = UseEmblaCarouselType[1]
-type UseCarouselParameters = Parameters<typeof useEmblaCarousel>
-type CarouselOptions = UseCarouselParameters[0]
-type CarouselPlugin = UseCarouselParameters[1]
-
-interface CarouselProps {
-  opts?: CarouselOptions
-  plugins?: CarouselPlugin
-  orientation?: 'horizontal' | 'vertical'
-  setApi?: (api: CarouselApi) => void
-}
-
-type CarouselContextProps = {
-  carouselRef: ReturnType<typeof useEmblaCarousel>[0]
-  api: ReturnType<typeof useEmblaCarousel>[1]
-  scrollPrev: () => void
-  scrollNext: () => void
-  canScrollPrev: boolean
-  canScrollNext: boolean
-} & CarouselProps
-
-const CarouselContext = React.createContext<CarouselContextProps | null>(null)
-
-function useCarousel() {
-  const context = React.useContext(CarouselContext)
-
-  if (!context) {
-    throw new Error('useCarousel must be used within a <Carousel />')
-  }
-
-  return context
-}
-
-function Carousel({
-  orientation = 'horizontal',
-  opts,
-  setApi,
-  plugins,
-  className,
-  children,
-  ...props
-}: React.ComponentProps<'div'> & CarouselProps) {
-  const [carouselRef, api] = useEmblaCarousel(
-    {
-      ...opts,
-      axis: orientation === 'horizontal' ? 'x' : 'y',
-    },
-    plugins
-  )
-  const [canScrollPrev, setCanScrollPrev] = React.useState(false)
-  const [canScrollNext, setCanScrollNext] = React.useState(false)
-
-  const onSelect = React.useCallback((api: CarouselApi) => {
-    if (!api) return
-    setCanScrollPrev(api.canScrollPrev())
-    setCanScrollNext(api.canScrollNext())
-  }, [])
-
-  const scrollPrev = React.useCallback(() => {
-    api?.scrollPrev()
-  }, [api])
-
-  const scrollNext = React.useCallback(() => {
-    api?.scrollNext()
-  }, [api])
-
-  const handleKeyDown = React.useCallback(
-    (event: React.KeyboardEvent<HTMLDivElement>) => {
-      if (event.key === 'ArrowLeft') {
-        event.preventDefault()
-        scrollPrev()
-      } else if (event.key === 'ArrowRight') {
-        event.preventDefault()
-        scrollNext()
-      }
-    },
-    [scrollPrev, scrollNext]
-  )
-
-  React.useEffect(() => {
-    if (!api || !setApi) return
-    setApi(api)
-  }, [api, setApi])
-
-  React.useEffect(() => {
-    if (!api) return
-    onSelect(api)
-    api.on('reInit', onSelect)
-    api.on('select', onSelect)
-
-    return () => {
-      api?.off('select', onSelect)
-    }
-  }, [api, onSelect])
-
-  return (
-    <CarouselContext.Provider
-      value={{
-        carouselRef,
-        api,
-        opts,
-        orientation:
-          orientation || (opts?.axis === 'y' ? 'vertical' : 'horizontal'),
-        scrollPrev,
-        scrollNext,
-        canScrollPrev,
-        canScrollNext,
-      }}
-    >
-      <div
-        onKeyDownCapture={handleKeyDown}
-        className={cn('relative', className)}
-        role="region"
-        aria-roledescription="carousel"
-        data-slot="carousel"
-        {...props}
-      >
-        {children}
-      </div>
-    </CarouselContext.Provider>
-  )
-}
-
-function CarouselContent({className, ...props}: React.ComponentProps<'div'>) {
-  const {carouselRef, orientation} = useCarousel()
-
-  return (
-    <div
-      ref={carouselRef}
-      className="overflow-hidden"
-      data-slot="carousel-content"
-    >
-      <div
-        className={cn(
-          'flex',
-          orientation === 'horizontal' ? '-ml-4' : '-mt-4 flex-col',
-          className
-        )}
-        {...props}
-      />
-    </div>
-  )
-}
-
-function CarouselItem({className, ...props}: React.ComponentProps<'div'>) {
-  const {orientation} = useCarousel()
-
-  return (
-    <div
-      role="group"
-      aria-roledescription="slide"
-      data-slot="carousel-item"
-      className={cn(
-        'min-w-0 shrink-0 grow-0 basis-full',
-        orientation === 'horizontal' ? 'pl-4' : 'pt-4',
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function CarouselPrevious({
-  className,
-  variant = 'outlined',
-  size = 'icon',
-  ...props
-}: React.ComponentProps<typeof Button>) {
-  const {orientation, scrollPrev, canScrollPrev} = useCarousel()
-
-  return (
-    <Button
-      data-slot="carousel-previous"
-      variant={variant}
-      size={size}
-      className={cn(
-        'absolute size-8 rounded-full',
-        orientation === 'horizontal'
-          ? 'top-1/2 -left-12 -translate-y-1/2'
-          : '-top-12 left-1/2 -translate-x-1/2 rotate-90',
-        className
-      )}
-      disabled={!canScrollPrev}
-      onClick={scrollPrev}
-      {...props}
-    >
-      <ArrowLeft />
-      <span className="sr-only">Previous slide</span>
-    </Button>
-  )
-}
-
-function CarouselNext({
-  className,
-  variant = 'outlined',
-  size = 'icon',
-  ...props
-}: React.ComponentProps<typeof Button>) {
-  const {orientation, scrollNext, canScrollNext} = useCarousel()
-
-  return (
-    <Button
-      data-slot="carousel-next"
-      variant={variant}
-      size={size}
-      className={cn(
-        'absolute size-8 rounded-full',
-        orientation === 'horizontal'
-          ? 'top-1/2 -right-12 -translate-y-1/2'
-          : '-bottom-12 left-1/2 -translate-x-1/2 rotate-90',
-        className
-      )}
-      disabled={!canScrollNext}
-      onClick={scrollNext}
-      {...props}
-    >
-      <ArrowRight />
-      <span className="sr-only">Next slide</span>
-    </Button>
-  )
-}
-
-export {
-  type CarouselApi,
-  Carousel,
-  CarouselContent,
-  CarouselItem,
-  CarouselPrevious,
-  CarouselNext,
-}