@hanzo/ui 3.5.3 → 3.6.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hanzo/ui",
-  "version": "3.5.3",
+  "version": "3.6.1",
   "description": "Library that contains shared UI primitives, support for a common design system, and other boilerplate support.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
@@ -43,6 +43,7 @@
     "@radix-ui/react-scroll-area": "^1.0.5",
     "@radix-ui/react-select": "^2.0.0",
     "@radix-ui/react-separator": "^1.0.3",
+    "@radix-ui/react-slider": "^1.1.2",
     "@radix-ui/react-slot": "^1.0.2",
     "@radix-ui/react-switch": "^1.0.3",
     "@radix-ui/react-tabs": "^1.0.4",

package/primitives/image.tsx

@@ -1,18 +1,20 @@
 import React from 'react'
 import NextImage from 'next/image'
 
-import type { ImageDef, Dimensions } from '../types'
-import { constrain, cn } from '../util'
+import type { ImageDef, Dimensions, MediaTransform } from '../types'
+import { constrain, cn, spreadToTransform } from '../util'
 
 const Image: React.FC<{
   def: ImageDef
   constrainTo?: Dimensions
+  transform?: MediaTransform
   fullWidth?: boolean
   className?: string
   preload?: boolean
 }> = ({
   def,
   constrainTo,
+  transform={},
   fullWidth=false,
   className='',
   preload=false
@@ -31,6 +33,7 @@ const Image: React.FC<{
     toSpread.style = {
       width: '100%',
       height: 'auto',
+      ...spreadToTransform(transform)
     }
     if (constrainTo) {
       toSpread.style.maxWidth = constrainTo.w  
@@ -41,6 +44,7 @@ const Image: React.FC<{
     const resolved = constrainTo ? constrain(dim, constrainTo) : dim
     toSpread.width = resolved.w
     toSpread.height = resolved.h
+    toSpread.style = {...spreadToTransform(transform)}
   } 
 
   if (sizes) {
@@ -61,13 +65,28 @@ const Image: React.FC<{
   const svgFillClass = _svgFillClass ?? ''
 
   return (fullWidth) ? (
-    <div className='relative flex flex-col items-center w-full'>
-      <NextImage src={src} alt={alt} data-vaul-no-drag {...toSpread} priority={preload} loading={preload ? 'eager' : 'lazy'} className={cn(svgFillClass, className)}/>
+    <div className='relative flex flex-col items-center justify-center w-full'>
+      <NextImage 
+        data-vaul-no-drag 
+        src={src} 
+        alt={alt} 
+        {...toSpread} 
+        priority={preload} 
+        loading={preload ? 'eager' : 'lazy'} 
+        className={cn(svgFillClass, className)}
+      />
     </div>
   ) : (
-    <NextImage src={src} alt={alt} data-vaul-no-drag {...toSpread} priority={preload} loading={preload ? 'eager' : 'lazy'} className={cn(svgFillClass, className)}/>   
+    <NextImage 
+      src={src} 
+      alt={alt} 
+      data-vaul-no-drag 
+      {...toSpread} 
+      priority={preload} 
+      loading={preload ? 'eager' : 'lazy'} 
+      className={cn(svgFillClass, className)}
+    />   
   )
 }
 
 export default Image
-

package/primitives/index.ts

@@ -1,6 +1,25 @@
-export { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from './accordion'
-export { default as ApplyTypography, type TypographySize} from './apply-typography'
-export { default as ActionButton } from './action-button'
+export { 
+  Accordion, 
+  AccordionItem, 
+  AccordionTrigger, 
+  AccordionContent 
+} from './accordion'
+
+export { 
+  Avatar, 
+  AvatarImage, 
+  AvatarFallback 
+} from './avatar'
+
+export {
+  Breadcrumb,
+  BreadcrumbList,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+  BreadcrumbEllipsis,
+} from './breadcrumb'
 
 export {
   default as Button,
@@ -10,20 +29,36 @@ export {
   buttonVariants,
 } from './button'
 
-export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent } from './card'
-export { default as DialogVideoController } from './dialog-video-controller'
+export { 
+  Card, 
+  CardHeader, 
+  CardFooter, 
+  CardTitle, 
+  CardDescription, 
+  CardContent 
+} from './card'
+
 export {
-  Dialog,
-  DialogPortal,
-  DialogOverlay,
-  DialogClose,
-  DialogTrigger,
-  DialogContent,
-  DialogHeader,
-  DialogFooter,
-  DialogTitle,
-  DialogDescription,
-} from './dialog'
+  type CarouselApi,
+  type CarouselOptions,
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselNext,
+  CarouselPrevious,
+} from './carousel'
+
+export {
+  Command,
+  CommandDialog,
+  CommandInput,
+  CommandList,
+  CommandEmpty,
+  CommandGroup,
+  CommandItem,
+  CommandShortcut,
+  CommandSeparator,
+} from './command'
 
 export {
   Drawer,
@@ -38,6 +73,18 @@ export {
   DrawerDescription,
 } from './drawer'
 
+export {
+  Dialog,
+  DialogPortal,
+  DialogOverlay,
+  DialogClose,
+  DialogTrigger,
+  DialogContent,
+  DialogHeader,
+  DialogFooter,
+  DialogTitle,
+  DialogDescription,
+} from './dialog'
 
 export {
   useFormField,
@@ -50,20 +97,34 @@ export {
   FormField,
 } from './form'
 
-export { default as Input } from './input'
-export { default as Label } from './label'
-export { default as LinkElement } from './link-element'
-export { default as MDXLink } from './mdx-link'
+export { 
+  InputOTP,
+  InputOTPGroup,
+  InputOTPSeparator,
+  InputOTPSlot,
+} from './input-otp'
+
+export { 
+  Popover, 
+  PopoverAnchor, 
+  PopoverArrow, 
+  PopoverClose, 
+  PopoverContent, 
+  PopoverTrigger, 
+} from './popover'
 
 export {
-  Breadcrumb,
-  BreadcrumbList,
-  BreadcrumbItem,
-  BreadcrumbLink,
-  BreadcrumbPage,
-  BreadcrumbSeparator,
-  BreadcrumbEllipsis,
-} from './breadcrumb'
+  Select,
+  SelectGroup,
+  SelectValue,
+  SelectTrigger,
+  SelectContent,
+  SelectLabel,
+  SelectItem,
+  SelectSeparator,
+  SelectScrollUpButton,
+  SelectScrollDownButton,
+} from './select'
 
 export {
   Sheet,
@@ -89,42 +150,6 @@ export {
   TableCaption,
 } from './table'
 
-export { default as BreakpointIndicator } from './breakpoint-indicator'
-
-export {
-  Select,
-  SelectGroup,
-  SelectValue,
-  SelectTrigger,
-  SelectContent,
-  SelectLabel,
-  SelectItem,
-  SelectSeparator,
-  SelectScrollUpButton,
-  SelectScrollDownButton,
-} from './select'
-
-export { 
-  Popover, 
-  PopoverAnchor, 
-  PopoverArrow, 
-  PopoverClose, 
-  PopoverContent, 
-  PopoverTrigger, 
-} from './popover'
-
-export {
-  Command,
-  CommandDialog,
-  CommandInput,
-  CommandList,
-  CommandEmpty,
-  CommandGroup,
-  CommandItem,
-  CommandShortcut,
-  CommandSeparator,
-} from './command'
-
 export { 
   Tabs, 
   TabsList, 
@@ -132,56 +157,38 @@ export {
   TabsContent 
 } from './tabs'
 
-export { 
-  Avatar, 
-  AvatarImage, 
-  AvatarFallback 
-} from './avatar'
-
-export { 
-  InputOTP,
-  InputOTPGroup,
-  InputOTPSeparator,
-  InputOTPSlot,
-} from './input-otp'
-
-export {
-  type CarouselApi,
-  type CarouselOptions,
-  Carousel,
-  CarouselContent,
-  CarouselItem,
-  CarouselNext,
-  CarouselPrevious,
-} from './carousel'
-
-export { Toggle, toggleVariants } from './toggle'
-export { ToggleGroup, ToggleGroupItem } from './toggle-group'
-
-
-export { ScrollArea, ScrollBar } from './scroll-area' 
-
-export { Toaster, toast } from './sonner'
-export { RadioGroup, RadioGroupItem } from './radio-group'
-
+export { default as ActionButton } from './action-button'
+export { default as ApplyTypography, type TypographySize} from './apply-typography'
 export { default as AspectRatio } from './aspect-ratio'
 export { default as Badge } from './badge'
-export { default as VideoPlayer } from './video-player'
-export { default as YouTubeEmbed } from './youtube-embed'
-export { default as Switch } from './switch' 
-export { default as TextArea } from './text-area' 
+export { default as BreakpointIndicator } from './breakpoint-indicator'
 export { default as Calendar } from './calendar' 
 export { default as Checkbox } from './checkbox' 
+export { default as DialogVideoController } from './dialog-video-controller'
 export { default as Image } from './image'
-export { default as Progress } from './progress' 
+export { default as InlineIcon } from './inline-icon' 
+export { default as Input } from './input'
+export { default as Label } from './label'
+export { default as LinkElement } from './link-element'
+export { default as ListBox } from './list-box'
+export { default as Main } from './main'
+export { default as MDXLink } from './mdx-link'
 export { default as MediaStack } from './media-stack' 
+export { default as NavItems} from './nav-items'
+export { default as Progress } from './progress' 
+export { RadioGroup, RadioGroupItem } from './radio-group'
+export { ScrollArea, ScrollBar } from './scroll-area' 
 export { default as Separator } from './separator' 
+export { default as Slider } from './slider' 
 export { default as Skeleton } from './skeleton' 
-export { default as InlineIcon } from './inline-icon' 
-export { default as NavItems} from './nav-items'
-export { default as Main } from './main'
-export { default as ListBox } from './list-box'
 export { default as StepIndicator } from './step-indicator'
+export { default as Switch } from './switch' 
+export { default as TextArea } from './text-area' 
+export { Toaster, toast } from './sonner'
+export { Toggle, toggleVariants } from './toggle'
+export { ToggleGroup, ToggleGroupItem } from './toggle-group'
+export { default as VideoPlayer } from './video-player'
+export { default as YouTubeEmbed } from './youtube-embed'
 
 export * as Icons from './icons'
 

package/primitives/media-stack.tsx

@@ -3,8 +3,7 @@ import React from 'react'
 
 import Spline from '@splinetool/react-spline'
 
-import { cn, constrain } from '../util'
-import { type Block, type VideoBlock, VideoBlockComponent } from '../blocks'
+import { cn, constrain, spreadToTransform } from '../util'
 import type { MediaStackDef, Dimensions } from '../types'
 
 import Image from './image'
@@ -15,11 +14,13 @@ const MediaStack: React.FC<{
   constrainTo?: Dimensions
   clx?: string
 }> = ({
-  media: {img, video, animation},
+  media,
   constrainTo: cnst = {w: 250, h: 250},
   clx=''
 }) => {
+  const {img, video, animation, mediaTransform} = media
 
+  const transform = mediaTransform ?? {}
 
     // Order of precedence: 3D > MP4 > Image
   if (animation) {
@@ -31,22 +32,23 @@ const MediaStack: React.FC<{
         style={{
             // // !aspect-[12/10] 
           width: (6/5 * (typeof cnst.h === 'number' ? cnst.h as number : parseInt(cnst.h as string)) ),
-          height: cnst.h
+          height: cnst.h,
+          ...spreadToTransform(transform)
         }}
       />
     )
   } 
   if (video) {
-
     const dim = constrain(video.dim.md, cnst)
     return (
       <VideoPlayer 
-        className={cn('mx-auto', clx)} 
+        className={clx} 
         sources={video.sources} 
         width={dim.w} 
         height={dim.h} 
         style={{
-          minHeight: dim.h // prevents layout jumps
+          minHeight: dim.h, // prevents layout jumps
+          ...spreadToTransform(transform)
         }}
         {...video.videoProps} 
       />
@@ -56,12 +58,12 @@ const MediaStack: React.FC<{
     <Image
       def={img}
       constrainTo={cnst} 
-      className={cn('mx-auto', clx)}
+      className={clx}
+      transform={transform}
     />
   ) : (
     <div style={{width: cnst.w, height: cnst.h}} className={cn('bg-level-2', clx)} />
   )
-
 }
 
 export default MediaStack

package/primitives/slider.tsx

@@ -0,0 +1,72 @@
+'use client'
+import * as React from 'react'
+import * as SliderPrimitive from '@radix-ui/react-slider'
+
+import { cn } from '../util'
+import { useState } from 'react'
+
+const Slider = React.forwardRef<
+  React.ElementRef<typeof SliderPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root> & {
+    trackBgClx?: string
+    rangeBgClx?: string
+    thumbClx?: string
+    thumbSlidingClx?: string
+  }
+>(({ 
+  className,
+  trackBgClx='bg-level-2',
+  rangeBgClx='bg-primary',
+  thumbClx='',
+  thumbSlidingClx='',
+  onValueChange,
+  onValueCommit,
+  ...rest 
+}, ref) => { 
+
+  const [sliding, setSliding] = useState<boolean>(false)
+
+  const _onChange = (value: number[]): void => {
+    if (!sliding) {
+      setSliding(true)
+    }
+    if (onValueChange) {
+      onValueChange(value)
+    }
+  }
+
+  const _onCommit = (value: number[]): void => {
+    setSliding(false)
+    if (onValueCommit) {
+      onValueCommit(value)
+    }
+  }
+
+  return (
+    <SliderPrimitive.Root
+      ref={ref}
+      className={cn(
+        'relative flex w-full touch-none select-none items-center',
+        className
+      )}
+      onValueChange={_onChange}
+      onValueCommit={_onCommit}
+      {...rest}
+    >
+      <SliderPrimitive.Track data-vaul-no-drag className={'relative h-2 w-full grow overflow-hidden rounded-full ' + trackBgClx}>
+        <SliderPrimitive.Range data-vaul-no-drag className={'absolute h-full ' + rangeBgClx} />
+      </SliderPrimitive.Track>
+      <SliderPrimitive.Thumb data-vaul-no-drag className={cn(
+        'block h-5 w-5 rounded-full border-2 border-primary bg-background ',
+        'ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-1 ', 
+        'focus-visible:ring-muted-2 focus-visible:ring-offset-1 disabled:pointer-events-none disabled:opacity-50',
+        thumbClx,
+        (sliding ? thumbSlidingClx : '')
+      )}/>
+    </SliderPrimitive.Root>
+  )
+})
+
+Slider.displayName = SliderPrimitive.Root.displayName
+
+export default Slider 

package/types/index.ts

@@ -24,8 +24,8 @@ export {
 export type { default as Icon } from './icon'
 export type { default as ImageDef } from './image-def'
 export type { default as LinkDef } from './link-def'
-export type { default as MediaStackDef } from './media-stack-def'
 export type { default as TShirtDimensions } from './tshirt-dimensions' 
 export type { default as TShirtSize } from './t-shirt-size' 
 export type { default as VideoDef } from './video-def'
 
+export type { MediaStackDef, MediaTransform } from './media-stack-def'

package/types/media-stack-def.ts

@@ -2,10 +2,25 @@ import type AnimationDef from './animation-def'
 import type ImageDef from './image-def'
 import type VideoDef from './video-def'
 
+  /** 
+   * This will be implemented via css transforms, 
+   * so will be a subset of those capabilities.
+   * Individual transforms will be added as they 
+   * are needed.
+   */
+interface MediaTransform {
+    /** (X and Y) or [X, Y] */ 
+  scale?: number | number[]  
+}
+
 interface MediaStackDef {
   img?: ImageDef
   video?: VideoDef
   animation?: AnimationDef
+  mediaTransform?: MediaTransform
 }
 
-export { type MediaStackDef as default }
+export type { 
+  MediaStackDef,
+  MediaTransform  
+}

package/util/index.ts

@@ -70,3 +70,5 @@ export const ldMerge = (
 export const capitalize = (str: string): string => (
   str.charAt(0).toUpperCase() + str.slice(1)
 )
+
+export { default as spreadToTransform } from './spread-to-transform'

package/util/spread-to-transform.ts

@@ -0,0 +1,24 @@
+import type { MediaTransform } from '../types'
+
+export default (t: MediaTransform) => {
+
+  let transformStrings: string[] = [] 
+  const scaleVal = 'scale' in t ? t.scale : undefined
+  if (scaleVal) {
+    if (typeof scaleVal === 'number') {
+      transformStrings.push(`scale(${scaleVal})`)   
+    }
+    else if (
+      Array.isArray(scaleVal) && 
+      scaleVal.length == 2 && 
+      typeof scaleVal[0] === 'number'
+    ) {
+      transformStrings.push(`scale(${scaleVal[0]}, ${scaleVal[1]})`)   
+    }
+    else {
+      throw new Error("parsing MediaTransform: Unrecognized value for 'scale'!")
+    }
+  }
+
+  return transformStrings.length > 0 ? { transform: transformStrings.join(' ') } : {}
+}