@shopify/shop-minis-react 0.0.16 → 0.0.17

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@shopify/shop-minis-react",
   "license": "SEE LICENSE IN LICENSE.txt",
-  "version": "0.0.16",
+  "version": "0.0.17",
   "sideEffects": false,
   "type": "module",
   "engines": {
@@ -18,7 +18,6 @@
   "files": [
     "src/**/*.{ts,tsx,css}",
     "dist/**/*",
-    "tailwind.config.js",
     "README.md",
     "LICENSE.txt"
   ],
@@ -28,10 +27,8 @@
       "import": "./src/index.ts",
       "types": "./src/index.ts"
     },
-    "./mocks": "./src/mocks.ts",
     "./styles": "./src/index.css",
-    "./tailwind": "./tailwind.config.js",
-    "./tailwind.config": "./tailwind.config.js",
+    "./mocks": "./src/mocks.ts",
     "./src/*": "./src/*"
   },
   "peerDependencies": {
@@ -41,13 +38,14 @@
     "typescript": ">=5.0.0"
   },
   "dependencies": {
+    "@shopify/shop-minis-platform": "0.0.3",
     "@tailwindcss/vite": "4.1.8",
     "@types/url-parse": "1.4.9",
     "@vitejs/plugin-react": "4.5.1",
-    "@shopify/shop-minis-platform": "0.0.3",
     "class-variance-authority": "0.7.1",
     "clsx": "2.1.1",
     "embla-carousel-react": "8.6.0",
+    "lodash": "4.17.21",
     "lucide-react": "0.513.0",
     "motion": "12.17.3",
     "next-themes": "0.4.6",
@@ -58,13 +56,12 @@
     "tailwindcss": "4.1.8",
     "tw-animate-css": "1.3.4",
     "url-parse": "1.5.10",
-    "vaul": "1.1.2",
-    "lodash": "4.17.21"
+    "vaul": "1.1.2"
   },
   "devDependencies": {
     "@shopify/generate-docs": "^0.16.6",
     "@types/node": "^20.12.1",
-    "@types/react": "^19.1.2",
+    "@types/react": "^19.1.6",
     "@types/react-dom": "^19.1.2",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",

package/src/components/atoms/button.tsx

@@ -1,71 +1,13 @@
-import * as React from 'react'
+import React from 'react'
 
-import {cva, type VariantProps} from 'class-variance-authority'
-import {Slot as SlotPrimitive} from 'radix-ui'
+import {VariantProps} from 'class-variance-authority'
 
 import {cn} from '../../lib/utils'
+import {BaseButton, buttonVariants} from '../ui/button'
 
 import {Touchable} from './touchable'
 
-const buttonVariants = cva(
-  "flex w-full items-center justify-center gap-3 whitespace-nowrap rounded-xl text-base font-semibold disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-5 shrink-0 [&_svg]:shrink-0",
-  {
-    variants: {
-      variant: {
-        primary:
-          'bg-primary text-primary-foreground shadow-xs hover:bg-primary/90',
-        secondary: 'bg-slate-900 text-white shadow-xs hover:bg-slate-800',
-        tertiary:
-          'bg-slate-100 text-slate-900 shadow-xs hover:bg-slate-200 dark:bg-slate-800 dark:text-slate-100 dark:hover:bg-slate-700',
-        blurred:
-          'bg-black/20 text-white shadow-xs hover:bg-black/30 backdrop-blur-md border border-white/20',
-        text: 'bg-transparent text-foreground hover:bg-accent hover:text-accent-foreground',
-        borderless: 'bg-transparent text-primary hover:text-primary/80',
-        borderlessUnbranded:
-          'bg-transparent text-foreground hover:text-foreground/80',
-        outlined:
-          'border border-border bg-background text-foreground shadow-xs hover:bg-accent hover:text-accent-foreground',
-        dangerous:
-          'bg-destructive text-white shadow-xs hover:bg-destructive/90',
-        'outlined-dangerous':
-          'border border-destructive bg-transparent text-destructive shadow-xs hover:bg-destructive/10',
-      },
-      size: {
-        default: 'h-9 px-4 py-2 has-[>svg]:px-3',
-        sm: 'h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5',
-        lg: 'h-10 rounded-md px-6 has-[>svg]:px-4',
-        icon: 'size-9',
-      },
-    },
-    defaultVariants: {
-      variant: 'primary',
-      size: 'default',
-    },
-  }
-)
-
-function BaseButton({
-  className,
-  variant,
-  size,
-  asChild = false,
-  ...props
-}: React.ComponentProps<'button'> &
-  VariantProps<typeof buttonVariants> & {
-    asChild?: boolean
-  }) {
-  const Comp = asChild ? SlotPrimitive.Slot : 'button'
-
-  return (
-    <Comp
-      data-slot="button"
-      className={cn(buttonVariants({variant, size, className}))}
-      {...props}
-    />
-  )
-}
-
-function Button({
+export function Button({
   className,
   variant,
   size,
@@ -81,14 +23,18 @@ function Button({
     [onClick]
   )
 
+  const wrapperClassName = cn(
+    variant === 'icon' ? 'flex w-auto' : 'flex w-full'
+  )
+
   return (
     <Touchable
       onClick={handleClick}
       stopPropagation={stopPropagation}
-      className={size === 'icon' ? 'flex w-auto' : 'flex w-full'}
+      className={wrapperClassName}
     >
       <BaseButton
-        className={className}
+        className={cn(className, wrapperClassName)}
         variant={variant}
         size={size}
         {...props}
@@ -96,5 +42,3 @@ function Button({
     </Touchable>
   )
 }
-
-export {Button, buttonVariants}

package/src/components/atoms/favorite-button.tsx

@@ -0,0 +1,22 @@
+import {Heart} from 'lucide-react'
+
+import {IconButton} from './icon-button'
+
+export function FavoriteButton({
+  onClick,
+  filled = false,
+}: {
+  onClick?: () => void
+  filled?: boolean
+}) {
+  return (
+    <IconButton
+      Icon={Heart}
+      filled={filled}
+      onClick={onClick}
+      buttonStyles={
+        filled ? 'bg-primary' : 'bg-button-overlay/30 backdrop-blur-sm'
+      }
+    />
+  )
+}

package/src/components/atoms/icon-button.tsx

@@ -0,0 +1,42 @@
+import {LucideIcon} from 'lucide-react'
+
+import {cn} from '../../lib/utils'
+
+import {Button} from './button'
+
+export function IconButton({
+  onClick,
+  filled = false,
+  size = 'default',
+  Icon,
+  buttonStyles,
+  iconStyles,
+}: {
+  onClick?: () => void
+  filled?: boolean
+  size?: 'default' | 'sm' | 'lg'
+  Icon: LucideIcon
+  buttonStyles?: string
+  iconStyles?: string
+}) {
+  const sizeMap = {
+    sm: 'size-3',
+    default: 'size-4',
+    lg: 'size-6',
+  }
+
+  return (
+    <Button
+      onClick={onClick}
+      variant="icon"
+      size={size}
+      className={cn('bg-primary', buttonStyles)}
+      stopPropagation
+    >
+      <Icon
+        fill={filled ? 'currentColor' : 'none'}
+        className={cn('text-primary-foreground', sizeMap[size], iconStyles)}
+      />
+    </Button>
+  )
+}

package/src/components/atoms/touchable.tsx

@@ -14,6 +14,10 @@ export const Touchable = ({
   const ref = React.useRef<HTMLDivElement>(null)
   const controls = useAnimationControls()
 
+  // Filter out props that shouldn't be passed to motion.div
+  // Any other custom props that get added to the component interface should be filtered here
+  const {ref: _, ...motionProps} = props
+
   const handleClick = React.useCallback(
     (event: React.MouseEvent<HTMLDivElement>) => {
       if (stopPropagation) event.stopPropagation()
@@ -75,7 +79,7 @@ export const Touchable = ({
       style={{
         touchAction: stopPropagation ? 'manipulation' : undefined,
       }}
-      {...props} // TODO: We may need to filter out some props, as we only need motion props
+      {...motionProps}
     >
       {children}
     </motion.div>

package/src/components/commerce/merchant-card.tsx

@@ -250,15 +250,4 @@ export const MerchantCardPrimitive = Object.assign(MerchantCardRoot, {
   Rating: MerchantCardRating,
 })
 
-export {
-  // Composed component
-  MerchantCard,
-  // Primitive components for custom composition
-  MerchantCardRoot,
-  MerchantCardImageContainer,
-  MerchantCardImage,
-  MerchantCardLogo,
-  MerchantCardInfo,
-  MerchantCardName,
-  MerchantCardRating,
-}
+export {MerchantCard}

package/src/components/commerce/product-card.tsx

@@ -9,9 +9,9 @@ import {useShopNavigation} from '../../hooks/navigation/useShopNavigation'
 import {useSavedProductsActions} from '../../hooks/user/useSavedProductsActions'
 import {formatMoney} from '../../lib/formatMoney'
 import {cn} from '../../lib/utils'
-import {Badge} from '../atoms/badge'
-import {Button} from '../atoms/button'
+import {FavoriteButton} from '../atoms/favorite-button'
 import {Touchable} from '../atoms/touchable'
+import {Badge} from '../ui/badge'
 
 const productCardVariants = cva(
   'relative w-full overflow-hidden rounded-xl border border-gray-200',
@@ -167,21 +167,7 @@ function ProductCardFavoriteButton({
 }) {
   return (
     <div className={cn('absolute bottom-3 right-3 z-10', className)} {...props}>
-      <Button
-        onClick={onPress}
-        variant="secondary"
-        size="icon"
-        className={cn(
-          'h-8 w-8 rounded-full border-0 shadow-sm',
-          filled ? 'bg-primary' : 'bg-grayscale-l6/60 backdrop-blur-sm'
-        )}
-        stopPropagation
-      >
-        <Heart
-          fill={filled ? 'currentColor' : 'none'}
-          className="h-4 w-4 text-white"
-        />
-      </Button>
+      <FavoriteButton onClick={onPress} filled={filled} />
     </div>
   )
 }
@@ -416,18 +402,4 @@ function ProductCard({
   )
 }
 
-export {
-  // Composed component
-  ProductCard,
-  // Primitive components for custom composition
-  ProductCardRoot,
-  ProductCardImageContainer,
-  ProductCardImage,
-  ProductCardBadge,
-  ProductCardFavoriteButton,
-  ProductCardInfo,
-  ProductCardTitle,
-  ProductCardPrice,
-  ProductCardCurrentPrice,
-  ProductCardOriginalPrice,
-}
+export {ProductCard}

package/src/components/commerce/product-link.tsx

@@ -2,16 +2,16 @@ import * as React from 'react'
 
 import {type Product} from '@shopify/shop-minis-platform'
 import {cva, type VariantProps} from 'class-variance-authority'
-import {Heart, Star} from 'lucide-react'
+import {Star} from 'lucide-react'
 import {Slot as SlotPrimitive} from 'radix-ui'
 
 import {useShopNavigation} from '../../hooks/navigation/useShopNavigation'
 import {useSavedProductsActions} from '../../hooks/user/useSavedProductsActions'
 import {formatMoney} from '../../lib/formatMoney'
 import {cn} from '../../lib/utils'
-import {Button} from '../atoms/button'
-import {Card, CardContent, CardAction} from '../atoms/card'
+import {FavoriteButton} from '../atoms/favorite-button'
 import {Touchable} from '../atoms/touchable'
+import {Card, CardContent, CardAction} from '../ui/card'
 
 const productLinkVariants = cva('', {
   variants: {
@@ -193,11 +193,11 @@ function ProductLinkRating({className, ...props}: React.ComponentProps<'div'>) {
 
 function ProductLinkActions({
   className,
-  onActionPress,
+  onPress,
   filled = false,
   ...props
 }: React.ComponentProps<typeof CardAction> & {
-  onActionPress?: () => void
+  onPress?: () => void
   filled?: boolean
 }) {
   return (
@@ -207,20 +207,14 @@ function ProductLinkActions({
     >
       <Touchable
         stopPropagation
-        onClick={onActionPress}
+        onClick={onPress}
         whileTap={{opacity: 0.7, scale: 0.95}}
         transition={{
           opacity: {type: 'tween', duration: 0.08, ease: 'easeInOut'},
           scale: {type: 'tween', duration: 0.08, ease: 'easeInOut'},
         }}
       >
-        <Button
-          variant="borderless"
-          size="icon"
-          className="h-auto w-auto p-0 hover:bg-transparent"
-        >
-          <Heart fill={filled ? 'currentColor' : 'none'} className="h-4 w-4" />
-        </Button>
+        <FavoriteButton filled={filled} onClick={onPress} />
       </Touchable>
     </CardAction>
   )
@@ -368,24 +362,10 @@ function ProductLink({product}: ProductLinkProps) {
 
       <ProductLinkActions
         filled={isFavoritedLocal}
-        onActionPress={handleActionPress}
+        onPress={handleActionPress}
       />
     </ProductLinkRoot>
   )
 }
 
-export {
-  // Composed component
-  ProductLink,
-  // Primitive components for custom composition
-  ProductLinkRoot,
-  ProductLinkImage,
-  ProductLinkInfo,
-  ProductLinkTitle,
-  ProductLinkPrice,
-  ProductLinkCurrentPrice,
-  ProductLinkOriginalPrice,
-  ProductLinkDiscountPrice,
-  ProductLinkRating,
-  ProductLinkActions,
-}
+export {ProductLink}

package/src/components/index.ts

@@ -4,24 +4,26 @@ export * from './commerce/product-card'
 export * from './commerce/product-link'
 export * from './commerce/merchant-card'
 
-export * from './atoms/accordion'
-export * from './atoms/alert'
-export * from './atoms/alert-dialog'
-export * from './atoms/avatar'
-export * from './atoms/badge'
 export * from './atoms/button'
-export * from './atoms/card'
-export * from './atoms/carousel'
-export * from './atoms/checkbox'
-export * from './atoms/dialog'
-export * from './atoms/drawer'
-export * from './atoms/input'
-export * from './atoms/label'
-export * from './atoms/progress'
-export * from './atoms/radio-group'
-export * from './atoms/resizable'
-export * from './atoms/scroll-area'
-export * from './atoms/select'
-export * from './atoms/separator'
-export * from './atoms/sheet'
-export * from './atoms/sonner'
+export * from './atoms/favorite-button'
+export * from './atoms/icon-button'
+export * from './atoms/touchable'
+
+export * from './ui/accordion'
+export * from './ui/alert'
+export * from './ui/alert-dialog'
+export * from './ui/card'
+export * from './ui/carousel'
+export * from './ui/checkbox'
+export * from './ui/dialog'
+export * from './ui/drawer'
+export * from './ui/input'
+export * from './ui/label'
+export * from './ui/progress'
+export * from './ui/radio-group'
+export * from './ui/resizable'
+export * from './ui/scroll-area'
+export * from './ui/select'
+export * from './ui/separator'
+export * from './ui/sheet'
+export * from './ui/sonner'

package/src/components/{atoms → ui}/alert-dialog.tsx

@@ -130,7 +130,7 @@ function AlertDialogCancel({
 }: React.ComponentProps<typeof AlertDialogPrimitive.Cancel>) {
   return (
     <AlertDialogPrimitive.Cancel
-      className={cn(buttonVariants({variant: 'outlined'}), className)}
+      className={cn(buttonVariants({variant: 'outline'}), className)}
       {...props}
     />
   )

package/src/components/ui/button.tsx

@@ -0,0 +1,77 @@
+import * as React from 'react'
+
+import {cva, type VariantProps} from 'class-variance-authority'
+import {Slot as SlotPrimitive} from 'radix-ui'
+
+import {cn} from '../../lib/utils'
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:bg-disabled disabled:text-disabled-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none aria-invalid:border-destructive",
+  {
+    variants: {
+      variant: {
+        default: 'bg-primary text-primary-foreground',
+        secondary: 'bg-secondary text-secondary-foreground',
+        tertiary: 'bg-tertiary text-tertiary-foreground',
+        destructive: 'bg-destructive text-white dark:bg-destructive/60',
+        outline: 'border bg-background dark:bg-input/30 dark:border-input',
+        ghost: '',
+        link: 'text-primary underline-offset-4',
+        icon: 'flex rounded-full items-center justify-center p-0 aspect-square',
+      },
+      size: {
+        default:
+          'min-h-[32px] rounded-lg px-3 py-2 text-sm leading-[18px] has-[>svg]:px-3',
+        sm: 'min-h-[20px] rounded-lg gap-1.5 px-3 py-1 text-xs leading-4 has-[>svg]:px-2.5',
+        lg: 'min-h-[44px] rounded-xl px-3 py-3 text-base leading-6 has-[>svg]:px-4',
+      },
+    },
+    compoundVariants: [
+      {
+        variant: 'icon',
+        size: 'default',
+        className:
+          'size-8 min-h-0 p-0 rounded-full gap-0 px-0 py-0 has-[>svg]:px-0',
+      },
+      {
+        variant: 'icon',
+        size: 'sm',
+        className:
+          'size-6 min-h-0 p-0 rounded-full gap-0 px-0 py-0 has-[>svg]:px-0',
+      },
+      {
+        variant: 'icon',
+        size: 'lg',
+        className:
+          'size-10 min-h-0 p-0 rounded-full gap-0 px-0 py-0 has-[>svg]:px-0',
+      },
+    ],
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  }
+)
+
+function BaseButton({
+  className,
+  variant,
+  size,
+  asChild = false,
+  ...props
+}: React.ComponentProps<'button'> &
+  VariantProps<typeof buttonVariants> & {
+    asChild?: boolean
+  }) {
+  const Comp = asChild ? SlotPrimitive.Slot : 'button'
+
+  return (
+    <Comp
+      data-slot="button"
+      className={cn(buttonVariants({variant, size, className}))}
+      {...props}
+    />
+  )
+}
+
+export {BaseButton, buttonVariants}

package/src/components/{atoms → ui}/carousel.tsx

@@ -7,7 +7,7 @@ import {ArrowLeft, ArrowRight} from 'lucide-react'
 
 import {cn} from '../../lib/utils'
 
-import {Button} from './button'
+import {BaseButton} from './button'
 
 type CarouselApi = UseEmblaCarouselType[1]
 type UseCarouselParameters = Parameters<typeof useEmblaCarousel>
@@ -173,14 +173,14 @@ function CarouselItem({className, ...props}: React.ComponentProps<'div'>) {
 
 function CarouselPrevious({
   className,
-  variant = 'outlined',
-  size = 'icon',
+  variant = 'icon',
+  size = 'default',
   ...props
-}: React.ComponentProps<typeof Button>) {
+}: React.ComponentProps<typeof BaseButton>) {
   const {orientation, scrollPrev, canScrollPrev} = useCarousel()
 
   return (
-    <Button
+    <BaseButton
       data-slot="carousel-previous"
       variant={variant}
       size={size}
@@ -197,20 +197,20 @@ function CarouselPrevious({
     >
       <ArrowLeft />
       <span className="sr-only">Previous slide</span>
-    </Button>
+    </BaseButton>
   )
 }
 
 function CarouselNext({
   className,
-  variant = 'outlined',
-  size = 'icon',
+  variant = 'icon',
+  size = 'default',
   ...props
-}: React.ComponentProps<typeof Button>) {
+}: React.ComponentProps<typeof BaseButton>) {
   const {orientation, scrollNext, canScrollNext} = useCarousel()
 
   return (
-    <Button
+    <BaseButton
       data-slot="carousel-next"
       variant={variant}
       size={size}
@@ -227,7 +227,7 @@ function CarouselNext({
     >
       <ArrowRight />
       <span className="sr-only">Next slide</span>
-    </Button>
+    </BaseButton>
   )
 }
 

package/src/components/{atoms → ui}/drawer.tsx

@@ -48,7 +48,8 @@ function DrawerContent({
   ...props
 }: React.ComponentProps<typeof DrawerPrimitive.Content>) {
   return (
-    <DrawerPortal data-slot="drawer-portal">
+    // vaul's Portal type incorrectly excludes children
+    <DrawerPortal {...({} as any)}>
       <DrawerOverlay />
       <DrawerPrimitive.Content
         data-slot="drawer-content"

package/src/index.css

@@ -1,2 +1,8 @@
-@import './base.css';
-@source '../node_modules/@shopify/shop-minis-react/src/**/*.{js,ts,jsx,tsx}';
+@import 'tailwindcss';
+@import 'tw-animate-css';
+
+@import './styles/theme.css';
+@import './styles/globals.css';
+
+/* When consumed as npm package, this path resolves from the consuming app's location */
+@source '../node_modules/@shopify/shop-minis-react/src';

package/src/styles/globals.css

@@ -0,0 +1,41 @@
+/* Global styles and browser behavior */
+
+/* Essential base styles */
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
+
+/* Touch and selection styles */
+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;
+}