{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "management-bar",
  "type": "registry:ui",
  "title": "Management Bar",
  "description": "Management Bar Component",
  "dependencies": [
    "motion",
    "lucide-react"
  ],
  "registryDependencies": [
    "https://animate-ui.com/r/sliding-number"
  ],
  "files": [
    {
      "path": "registry/ui-elements/management-bar/index.tsx",
      "content": "'use client';\n\nimport * as React from 'react';\nimport {\n  ChevronLeft,\n  ChevronRight,\n  Ban,\n  X,\n  Command,\n  IdCard,\n} from 'lucide-react';\nimport { SlidingNumber } from '@/components/animate-ui/text/sliding-number';\nimport { motion, type Variants, type Transition } from 'motion/react';\n\nconst TOTAL_PAGES = 10;\n\nconst BUTTON_MOTION_CONFIG = {\n  initial: 'rest',\n  whileHover: 'hover',\n  whileTap: 'tap',\n  variants: {\n    rest: { maxWidth: '40px' },\n    hover: {\n      maxWidth: '140px',\n      transition: { type: 'spring', stiffness: 200, damping: 35, delay: 0.15 },\n    },\n    tap: { scale: 0.95 },\n  },\n  transition: { type: 'spring', stiffness: 250, damping: 25 },\n} as const;\n\nconst LABEL_VARIANTS: Variants = {\n  rest: { opacity: 0, x: 4 },\n  hover: { opacity: 1, x: 0, visibility: 'visible' },\n  tap: { opacity: 1, x: 0, visibility: 'visible' },\n};\n\nconst LABEL_TRANSITION: Transition = {\n  type: 'spring',\n  stiffness: 200,\n  damping: 25,\n};\n\nfunction ManagementBar() {\n  const [currentPage, setCurrentPage] = React.useState(1);\n\n  const handlePrevPage = React.useCallback(() => {\n    if (currentPage > 1) setCurrentPage(currentPage - 1);\n  }, [currentPage]);\n\n  const handleNextPage = React.useCallback(() => {\n    if (currentPage < TOTAL_PAGES) setCurrentPage(currentPage + 1);\n  }, [currentPage]);\n\n  return (\n    <div className=\"flex w-fit flex-wrap items-center gap-y-2 rounded-2xl border border-border bg-background p-2 shadow-lg\">\n      <div className=\"mx-auto flex shrink-0 items-center\">\n        <button\n          disabled={currentPage === 1}\n          className=\"p-1 text-muted-foreground transition-colors hover:text-foreground disabled:text-muted-foreground/30 disabled:hover:text-muted-foreground/30\"\n          onClick={handlePrevPage}\n        >\n          <ChevronLeft size={20} />\n        </button>\n        <div className=\"mx-2 flex items-center space-x-1 text-sm tabular-nums\">\n          <SlidingNumber\n            className=\"text-foreground\"\n            padStart\n            number={currentPage}\n          />\n          <span className=\"text-muted-foreground\">/ {TOTAL_PAGES}</span>\n        </div>\n        <button\n          disabled={currentPage === TOTAL_PAGES}\n          className=\"p-1 text-muted-foreground transition-colors hover:text-foreground disabled:text-muted-foreground/30 disabled:hover:text-muted-foreground/30\"\n          onClick={handleNextPage}\n        >\n          <ChevronRight size={20} />\n        </button>\n      </div>\n\n      <div className=\"mx-3 h-6 w-px bg-border rounded-full\" />\n\n      <motion.div\n        layout\n        layoutRoot\n        className=\"mx-auto flex flex-wrap space-x-2 sm:flex-nowrap\"\n      >\n        <motion.button\n          {...BUTTON_MOTION_CONFIG}\n          className=\"flex h-10 items-center space-x-2 overflow-hidden whitespace-nowrap rounded-lg bg-neutral-200/60 dark:bg-neutral-600/80 px-2.5 py-2 text-neutral-600 dark:text-neutral-200\"\n          aria-label=\"Blacklist\"\n        >\n          <Ban size={20} className=\"shrink-0\" />\n          <motion.span\n            variants={LABEL_VARIANTS}\n            transition={LABEL_TRANSITION}\n            className=\"invisible text-sm\"\n          >\n            Blacklist\n          </motion.span>\n        </motion.button>\n\n        <motion.button\n          {...BUTTON_MOTION_CONFIG}\n          className=\"flex h-10 items-center space-x-2 overflow-hidden whitespace-nowrap rounded-lg bg-red-200/60 dark:bg-red-800/80 px-2.5 py-2 text-red-600 dark:text-red-300\"\n          aria-label=\"Reject\"\n        >\n          <X size={20} className=\"shrink-0\" />\n          <motion.span\n            variants={LABEL_VARIANTS}\n            transition={LABEL_TRANSITION}\n            className=\"invisible text-sm\"\n          >\n            Reject\n          </motion.span>\n        </motion.button>\n\n        <motion.button\n          {...BUTTON_MOTION_CONFIG}\n          className=\"flex h-10 items-center space-x-2 overflow-hidden whitespace-nowrap rounded-lg bg-green-200/60 dark:bg-green-800/80 px-2.5 py-2 text-green-600 dark:text-green-300\"\n          aria-label=\"Hire\"\n        >\n          <IdCard size={20} className=\"shrink-0\" />\n          <motion.span\n            variants={LABEL_VARIANTS}\n            transition={LABEL_TRANSITION}\n            className=\"invisible text-sm\"\n          >\n            Hire\n          </motion.span>\n        </motion.button>\n      </motion.div>\n\n      <div className=\"mx-3 hidden h-6 w-px bg-border sm:block rounded-full\" />\n\n      <motion.button\n        whileTap={{ scale: 0.975 }}\n        className=\"flex w-full h-10 text-sm cursor-pointer items-center justify-center rounded-lg bg-teal-500 dark:bg-teal-600/80 px-3 py-2 text-white transition-colors duration-300 dark:hover:bg-teal-800 hover:bg-teal-600 sm:w-auto\"\n      >\n        <span className=\"mr-1 text-neutral-200\">Move to:</span>\n        <span>Interview I</span>\n        <div className=\"mx-3 h-5 w-px bg-white/40 rounded-full\" />\n        <div className=\"flex items-center gap-1 rounded-md bg-white/20 px-1.5 py-0.5 -mr-1\">\n          <Command size={14} />E\n        </div>\n      </motion.button>\n    </div>\n  );\n}\n\nexport { ManagementBar };\n",
      "type": "registry:ui",
      "target": "components/animate-ui/ui-elements/management-bar.tsx"
    }
  ]
}