51:I[707087,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"RegistryDependencies"] 52:I[512940,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"Installation"] 53:I[314491,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"FilesView"] 54:T3d1e,"use client"; import { cn } from "@/lib/utils"; import { cva, type VariantProps } from "class-variance-authority"; import { motion, type Transition, useReducedMotion, type Variants, } from "motion/react"; import { type ComponentPropsWithoutRef, cloneElement, type FocusEvent, isValidElement, type MouseEvent, type ReactElement, type ReactNode, type Ref, type RefCallback, type RefObject, useEffect, useState, } from "react"; const DEFAULT_EASE = [0.77, 0, 0.175, 1] as const; const DEFAULT_DURATION = 0.7; const LABEL_OFFSET_BY_SIZE = { sm: { default: -30, lg: -36 }, default: { default: -38, lg: -46 }, lg: { default: -44, lg: -52 }, } as const; const slidingChipButtonVariants = cva( "inline-flex min-w-0 shrink-0 cursor-pointer items-center justify-center whitespace-nowrap font-mono uppercase outline-none focus-visible:ring-2 focus-visible:ring-offset-2", { variants: { variant: { accent: "focus-visible:ring-accent-pro/50", inverted: "focus-visible:ring-foreground/30", outline: "focus-visible:ring-border", ghost: "focus-visible:ring-muted-foreground/30", }, size: { sm: "text-xs", default: "text-sm", lg: "text-base", }, }, defaultVariants: { variant: "accent", size: "default", }, } ); const slidingChipButtonChipVariants = cva( "pointer-events-none flex items-center justify-center will-change-transform", { variants: { variant: { accent: "bg-[rgba(251,70,13)] text-neutral-950", inverted: "bg-foreground text-background", outline: "border border-foreground bg-transparent text-foreground", ghost: "bg-muted text-foreground", }, size: { sm: "size-7", default: "size-8 lg:size-10", lg: "size-10 lg:size-12", }, }, defaultVariants: { variant: "accent", size: "default", }, } ); const slidingChipButtonLabelVariants = cva( "pointer-events-none flex items-center justify-center will-change-transform", { variants: { variant: { accent: "bg-[rgba(251,70,13)] text-neutral-950", inverted: "bg-foreground text-background", outline: "border border-foreground bg-transparent text-foreground", ghost: "bg-muted text-foreground", }, size: { sm: "h-7 px-2", default: "h-8 flex-1 px-2 lg:h-10 lg:px-3", lg: "h-10 flex-1 px-3 lg:h-12 lg:px-4", }, }, defaultVariants: { variant: "accent", size: "default", }, } ); const slidingChipButtonGroupVariants = cva( "pointer-events-none relative flex w-full items-center", { variants: { size: { sm: "gap-1", default: "gap-1.5", lg: "gap-2", }, }, defaultVariants: { size: "default", }, } ); type WithAsChild = | (Base & { asChild: true; children: ReactElement }) | (Base & { asChild?: false | undefined; children?: string }); type SlidingChipButtonSize = NonNullable< VariantProps["size"] >; function SlidingChipButtonPlusIcon({ className }: { className?: string }) { return ( ); } function mergeRefs(...refs: (Ref | undefined)[]): RefCallback { return (node) => { for (const ref of refs) { if (!ref) { continue; } if (typeof ref === "function") { ref(node); } else { (ref as RefObject).current = node; } } }; } function getLinkLabel( asChild: boolean, children: string | ReactElement | undefined, label: string | undefined ): string { if (asChild && isValidElement(children)) { const childText = (children.props as { children?: unknown }).children; if (typeof childText === "string") { return childText; } return label ?? ""; } if (typeof children === "string") { return children; } return label ?? ""; } function useResponsiveLabelOffset( size: SlidingChipButtonSize, labelOffset?: number, labelOffsetLg?: number ): number { const offsets = LABEL_OFFSET_BY_SIZE[size ?? "default"]; const baseOffset = labelOffset ?? offsets.default; const largeOffset = labelOffsetLg ?? offsets.lg; const [offset, setOffset] = useState(baseOffset); useEffect(() => { if (labelOffsetLg === undefined && labelOffset !== undefined) { setOffset(labelOffset); return; } const mediaQuery = window.matchMedia("(min-width: 1024px)"); const update = () => { setOffset(mediaQuery.matches ? largeOffset : baseOffset); }; update(); mediaQuery.addEventListener("change", update); return () => { mediaQuery.removeEventListener("change", update); }; }, [baseOffset, largeOffset, labelOffset, labelOffsetLg]); return offset; } function resolveMotionTransition( shouldReduceMotion: boolean | null, duration: number, ease: readonly [number, number, number, number] ): Transition { if (shouldReduceMotion) { return { duration: 0 }; } return { duration, ease }; } type SlidingChipButtonBaseProps = Omit< ComponentPropsWithoutRef<"a">, "children" > & VariantProps & { /** Alternative to string `children` for demos and controlled previews. */ label?: string; /** * Animation duration in seconds. * @default 0.7 */ duration?: number; /** * Cubic-bezier easing values. * @default [0.77, 0, 0.175, 1] */ ease?: readonly [number, number, number, number]; /** Label x-offset at rest (mobile / default breakpoint). */ labelOffset?: number; /** Label x-offset at rest on `lg` breakpoint and up. */ labelOffsetLg?: number; /** Rest rotation for the leading chip (degrees). @default -45 */ startChipRestRotate?: number; /** Active rotation for the leading chip (degrees). @default 0 */ startChipActiveRotate?: number; /** Rest rotation for the trailing chip (degrees). @default 0 */ endChipRestRotate?: number; /** Active rotation for the trailing chip (degrees). @default -45 */ endChipActiveRotate?: number; /** Rest scale for both chips. @default 0 for start, 1 for end */ startChipRestScale?: number; startChipActiveScale?: number; endChipRestScale?: number; endChipActiveScale?: number; /** Custom icon for both chips. */ icon?: ReactNode; /** Override the leading chip icon. */ startIcon?: ReactNode; /** Override the trailing chip icon. */ endIcon?: ReactNode; /** Class names merged onto the motion group wrapper. */ groupClassName?: string; /** Class names merged onto both chips and the label chip. */ chipClassName?: string; /** Class names merged onto the label chip only. */ labelClassName?: string; /** Class names merged onto the leading chip only. */ startChipClassName?: string; /** Class names merged onto the trailing chip only. */ endChipClassName?: string; /** Class names merged onto chip icons. */ iconClassName?: string; }; export type SlidingChipButtonProps = WithAsChild; interface SlidingChipButtonAnimatedContentProps { chipClassName?: string; duration: number; ease: readonly [number, number, number, number]; endChipActiveRotate: number; endChipActiveScale: number; endChipClassName?: string; endChipRestRotate: number; endChipRestScale: number; endIcon?: ReactNode; groupClassName?: string; icon?: ReactNode; iconClassName?: string; isActive: boolean; label: string; labelClassName?: string; labelOffset: number; size: SlidingChipButtonSize; startChipActiveRotate: number; startChipActiveScale: number; startChipClassName?: string; startChipRestRotate: number; startChipRestScale: number; startIcon?: ReactNode; variant: NonNullable; } function SlidingChipButtonAnimatedContent({ variant = "accent", size = "default", label, labelOffset, isActive, duration, ease, icon, startIcon, endIcon, groupClassName, chipClassName, labelClassName, startChipClassName, endChipClassName, iconClassName, startChipRestRotate, startChipActiveRotate, startChipRestScale, startChipActiveScale, endChipRestRotate, endChipActiveRotate, endChipRestScale, endChipActiveScale, }: SlidingChipButtonAnimatedContentProps) { const shouldReduceMotion = useReducedMotion(); const motionTransition = resolveMotionTransition( shouldReduceMotion, duration, ease ); const resolvedStartIcon = startIcon ?? icon ?? ( ); const resolvedEndIcon = endIcon ?? icon ?? ( ); const startChipVariants: Variants = { rest: { rotate: startChipRestRotate, scale: startChipRestScale }, hover: { rotate: startChipActiveRotate, scale: startChipActiveScale }, }; const endChipVariants: Variants = { rest: { rotate: endChipRestRotate, scale: endChipRestScale }, hover: { rotate: endChipActiveRotate, scale: endChipActiveScale }, }; return ( {resolvedStartIcon} {label} {resolvedEndIcon} ); } function SlidingChipButton({ asChild = false, variant = "accent", size = "default", duration = DEFAULT_DURATION, ease = DEFAULT_EASE, label, children, className, groupClassName, chipClassName, labelClassName, startChipClassName, endChipClassName, iconClassName, labelOffset, labelOffsetLg, startChipRestRotate = -45, startChipActiveRotate = 0, startChipRestScale = 0, startChipActiveScale = 1, endChipRestRotate = 0, endChipActiveRotate = -45, endChipRestScale = 1, endChipActiveScale = 0, icon, startIcon, endIcon, href, ref, "aria-label": ariaLabel, onBlur, onFocus, onMouseEnter, onMouseLeave, ...props }: SlidingChipButtonProps & { ref?: Ref; }) { const text = getLinkLabel(asChild, children, label); const resolvedSize = size ?? "default"; const resolvedLabelOffset = useResponsiveLabelOffset( resolvedSize, labelOffset, labelOffsetLg ); const [isActive, setIsActive] = useState(false); const rootClassName = cn( slidingChipButtonVariants({ variant, size, className }) ); const animatedContent = ( ); const interactionHandlers = { onBlur: (event: FocusEvent) => { onBlur?.(event as FocusEvent); setIsActive(false); }, onFocus: (event: FocusEvent) => { onFocus?.(event as FocusEvent); setIsActive(true); }, onMouseEnter: (event: MouseEvent) => { onMouseEnter?.(event as MouseEvent); setIsActive(true); }, onMouseLeave: (event: MouseEvent) => { onMouseLeave?.(event as MouseEvent); setIsActive(false); }, }; if (asChild) { if (!isValidElement(children)) { return null; } const { ref: childRef, className: childClassName, "aria-label": childAriaLabel, onBlur: childOnBlur, onFocus: childOnFocus, onMouseEnter: childOnMouseEnter, onMouseLeave: childOnMouseLeave, ...childProps } = children.props as { ref?: Ref; className?: string; "aria-label"?: string; onBlur?: (event: FocusEvent) => void; onFocus?: (event: FocusEvent) => void; onMouseEnter?: (event: MouseEvent) => void; onMouseLeave?: (event: MouseEvent) => void; }; return cloneElement( children, { ...childProps, ...props, ...interactionHandlers, "aria-label": ariaLabel ?? childAriaLabel ?? (text || undefined), className: cn(childClassName, rootClassName), onBlur: (event: FocusEvent) => { childOnBlur?.(event); interactionHandlers.onBlur(event); }, onFocus: (event: FocusEvent) => { childOnFocus?.(event); interactionHandlers.onFocus(event); }, onMouseEnter: (event: MouseEvent) => { childOnMouseEnter?.(event); interactionHandlers.onMouseEnter(event); }, onMouseLeave: (event: MouseEvent) => { childOnMouseLeave?.(event); interactionHandlers.onMouseLeave(event); }, ref: mergeRefs(childRef, ref), } as Record, animatedContent ); } return ( {animatedContent} ); } export { SlidingChipButton, SlidingChipButtonPlusIcon, slidingChipButtonChipVariants, slidingChipButtonGroupVariants, slidingChipButtonLabelVariants, slidingChipButtonVariants, }; export type SlidingChipButtonVariant = NonNullable< SlidingChipButtonProps["variant"] >; 4d:["$","div",null,{"className":"flex flex-col gap-12","children":[["$","div",null,{"className":"pt-10 flex flex-col gap-4","children":[["$","ul",null,{"className":"flex gap-2 flex-wrap","children":[["$","li","motion",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"text-xs font-medium","children":"motion"}]]}]}],["$","li","class-variance-authority",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/class-variance-authority","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"text-xs font-medium","children":"class-variance-authority"}]]}]}]]}],["$","$L51",null,{"registryDependencies":["utils"]}]]}],["$","$L52",null,{"sourceUrl":"https://ui.soralabs.io.vn/r/sliding-chip-button.json","proxyUrl":"https://shadcnregistry.com/r/soralabs/sliding-chip-button","itemId":"@soralabs/sliding-chip-button"}],["$","section",null,{"className":"flex flex-col gap-4","id":"files","children":[["$","h2",null,{"className":"text-lg md:text-2xl font-bold font-mono","children":"Files"}],["$","$L53",null,{"files":[{"path":"registry/primitives/buttons/sliding-chip-button/index.tsx","content":"$54","type":"registry:ui","target":"components/sora-ui/buttons/sliding-chip-button.tsx"}]}]]}],"$L55"]}]

Sliding Chip Button

Installation

Files

components

Styles