{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "notifications-filter",
  "type": "registry:ui",
  "title": "Notifications Filter",
  "description": "Spring pill bar with layoutId sliding indicator and staggered item transitions.",
  "dependencies": [
    "motion"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "registry/ruixenui/notifications-filter.tsx",
      "content": "\"use client\";\n\nimport { useState, useCallback } from \"react\";\nimport { motion, AnimatePresence } from \"motion/react\";\n\n/**\n * Spring Pill Bar — Rauno Freiberg craft.\n *\n * Filter categories are pill buttons with a sliding indicator\n * that spring-animates between active positions via layoutId.\n * Notifications spring in/out on filter change with stagger.\n */\n\n/* ── Audio ── */\n\nlet _a: AudioContext | null = null;\n\nfunction tick() {\n  try {\n    if (!_a) _a = new AudioContext();\n    const buf = _a.createBuffer(\n      1,\n      Math.floor(_a.sampleRate * 0.003),\n      _a.sampleRate,\n    );\n    const d = buf.getChannelData(0);\n    for (let i = 0; i < d.length; i++)\n      d[i] = (Math.random() * 2 - 1) * (1 - i / d.length) ** 4;\n    const src = _a.createBufferSource();\n    src.buffer = buf;\n    const g = _a.createGain();\n    g.gain.value = 0.06;\n    src.connect(g).connect(_a.destination);\n    src.start();\n  } catch {\n    /* silent */\n  }\n}\n\n/* ── Types ── */\n\ninterface FilterItem {\n  id: string;\n  title: string;\n  body: string;\n  time: string;\n  category: string;\n}\n\ninterface NotificationsFilterProps {\n  items?: FilterItem[];\n  categories?: string[];\n  sound?: boolean;\n}\n\n/* ── Defaults ── */\n\nconst DEFAULT_CATEGORIES = [\"All\", \"Updates\", \"Alerts\", \"Messages\"];\n\nconst DEFAULT_ITEMS: FilterItem[] = [\n  {\n    id: \"1\",\n    title: \"New deployment\",\n    body: \"v2.4.1 deployed to production\",\n    time: \"2m\",\n    category: \"Updates\",\n  },\n  {\n    id: \"2\",\n    title: \"Security alert\",\n    body: \"New login from unknown device\",\n    time: \"8m\",\n    category: \"Alerts\",\n  },\n  {\n    id: \"3\",\n    title: \"Message from Alex\",\n    body: \"Hey, can you review my PR?\",\n    time: \"15m\",\n    category: \"Messages\",\n  },\n  {\n    id: \"4\",\n    title: \"Build passed\",\n    body: \"Pipeline #846 completed successfully\",\n    time: \"24m\",\n    category: \"Updates\",\n  },\n  {\n    id: \"5\",\n    title: \"Rate limit warning\",\n    body: \"API approaching rate limit threshold\",\n    time: \"1h\",\n    category: \"Alerts\",\n  },\n  {\n    id: \"6\",\n    title: \"Message from Sarah\",\n    body: \"The design review is scheduled for 3pm\",\n    time: \"2h\",\n    category: \"Messages\",\n  },\n  {\n    id: \"7\",\n    title: \"Package update\",\n    body: \"3 dependencies have available updates\",\n    time: \"4h\",\n    category: \"Updates\",\n  },\n  {\n    id: \"8\",\n    title: \"Downtime alert\",\n    body: \"Scheduled maintenance at midnight\",\n    time: \"6h\",\n    category: \"Alerts\",\n  },\n];\n\n/* ── CSS ── */\n\nconst CSS = `.nf{--nf-glass:linear-gradient(135deg,rgba(255,255,255,.78),rgba(255,255,255,.62));--nf-border:rgba(0,0,0,.06);--nf-shadow:0 8px 32px rgba(0,0,0,.08),0 1px 2px rgba(0,0,0,.04);--nf-hi:rgba(0,0,0,.88);--nf-dim:rgba(0,0,0,.35);--nf-sep:rgba(0,0,0,.06);--nf-pill-bg:rgba(0,0,0,.88);--nf-pill-fg:rgba(255,255,255,.95);--nf-pill-idle:rgba(0,0,0,.45);--nf-hover:rgba(0,0,0,.03)}.dark .nf,[data-theme=\"dark\"] .nf{--nf-glass:linear-gradient(135deg,rgba(255,255,255,.05),rgba(255,255,255,.02));--nf-border:rgba(255,255,255,.07);--nf-shadow:0 8px 32px rgba(0,0,0,.32),0 1px 2px rgba(0,0,0,.16);--nf-hi:rgba(255,255,255,.88);--nf-dim:rgba(255,255,255,.35);--nf-sep:rgba(255,255,255,.06);--nf-pill-bg:rgba(255,255,255,.88);--nf-pill-fg:rgba(0,0,0,.9);--nf-pill-idle:rgba(255,255,255,.45);--nf-hover:rgba(255,255,255,.03)}`;\n\n/* ── Component ── */\n\nexport function NotificationsFilter({\n  items = DEFAULT_ITEMS,\n  categories = DEFAULT_CATEGORIES,\n  sound = true,\n}: NotificationsFilterProps) {\n  const [active, setActive] = useState(categories[0]);\n  const [hoveredId, setHoveredId] = useState<string | null>(null);\n\n  const filtered =\n    active === \"All\" ? items : items.filter((i) => i.category === active);\n\n  const handleCategory = useCallback(\n    (cat: string) => {\n      if (cat === active) return;\n      if (sound) tick();\n      setActive(cat);\n    },\n    [active, sound],\n  );\n\n  return (\n    <div\n      className=\"nf\"\n      style={{\n        width: 360,\n        borderRadius: 14,\n        background: \"var(--nf-glass)\",\n        border: \"1px solid var(--nf-border)\",\n        boxShadow: \"var(--nf-shadow)\",\n        overflow: \"hidden\",\n        backdropFilter: \"blur(16px)\",\n        WebkitBackdropFilter: \"blur(16px)\",\n      }}\n    >\n      <style dangerouslySetInnerHTML={{ __html: CSS }} />\n\n      {/* Header */}\n      <div style={{ padding: \"12px 14px 0\" }}>\n        <span\n          style={{\n            fontSize: 13,\n            fontWeight: 560,\n            color: \"var(--nf-hi)\",\n            letterSpacing: \"-0.01em\",\n          }}\n        >\n          Notifications\n        </span>\n      </div>\n\n      {/* Pill bar */}\n      <div\n        style={{\n          display: \"flex\",\n          gap: 4,\n          padding: \"10px 14px 12px\",\n          overflowX: \"auto\",\n        }}\n      >\n        {categories.map((cat) => {\n          const isActive = cat === active;\n          return (\n            <button\n              key={cat}\n              onClick={() => handleCategory(cat)}\n              style={{\n                position: \"relative\",\n                height: 28,\n                padding: \"0 12px\",\n                border: \"none\",\n                borderRadius: 999,\n                background: \"transparent\",\n                cursor: \"pointer\",\n                fontSize: 11,\n                fontWeight: 500,\n                letterSpacing: \"0.01em\",\n                color: isActive ? \"var(--nf-pill-fg)\" : \"var(--nf-pill-idle)\",\n                zIndex: 1,\n                transition: \"color 0.15s\",\n                whiteSpace: \"nowrap\",\n                textTransform: \"uppercase\" as const,\n              }}\n            >\n              {isActive && (\n                <motion.div\n                  layoutId=\"nf-indicator\"\n                  style={{\n                    position: \"absolute\",\n                    inset: 0,\n                    borderRadius: 999,\n                    background: \"var(--nf-pill-bg)\",\n                    zIndex: -1,\n                  }}\n                  transition={{ type: \"spring\", stiffness: 500, damping: 35 }}\n                />\n              )}\n              {cat}\n            </button>\n          );\n        })}\n      </div>\n\n      <div\n        style={{\n          height: 0.5,\n          background: \"var(--nf-sep)\",\n          marginLeft: 14,\n          marginRight: 14,\n        }}\n      />\n\n      {/* Items */}\n      <div style={{ maxHeight: 320, overflowY: \"auto\" }}>\n        <AnimatePresence mode=\"popLayout\" initial={false}>\n          {filtered.map((item, index) => {\n            const isHovered = hoveredId === item.id;\n            const isLast = index === filtered.length - 1;\n\n            return (\n              <motion.div\n                key={item.id}\n                layout\n                initial={{ opacity: 0, scale: 0.95, y: -4 }}\n                animate={{ opacity: 1, scale: 1, y: 0 }}\n                exit={{ opacity: 0, scale: 0.95, y: -4 }}\n                transition={{\n                  delay: index * 0.03,\n                  type: \"spring\",\n                  stiffness: 400,\n                  damping: 30,\n                }}\n                onMouseEnter={() => setHoveredId(item.id)}\n                onMouseLeave={() => setHoveredId(null)}\n                style={{\n                  padding: \"10px 14px\",\n                  borderBottom: isLast ? \"none\" : `0.5px solid var(--nf-sep)`,\n                  cursor: \"default\",\n                  background: isHovered ? \"var(--nf-hover)\" : \"transparent\",\n                  transition: \"background 0.12s\",\n                }}\n              >\n                <div\n                  style={{\n                    display: \"flex\",\n                    alignItems: \"center\",\n                    justifyContent: \"space-between\",\n                    marginBottom: 2,\n                  }}\n                >\n                  <span\n                    style={{\n                      fontSize: 13,\n                      fontWeight: 520,\n                      color: isHovered ? \"var(--nf-hi)\" : \"var(--nf-dim)\",\n                      transition: \"color 0.12s\",\n                      letterSpacing: \"-0.01em\",\n                      overflow: \"hidden\",\n                      textOverflow: \"ellipsis\",\n                      whiteSpace: \"nowrap\",\n                      flex: 1,\n                    }}\n                  >\n                    {item.title}\n                  </span>\n                  <span\n                    style={{\n                      fontSize: 11,\n                      fontWeight: 400,\n                      color: \"var(--nf-dim)\",\n                      flexShrink: 0,\n                      marginLeft: 8,\n                    }}\n                  >\n                    {item.time}\n                  </span>\n                </div>\n                <div\n                  style={{\n                    fontSize: 12,\n                    fontWeight: 400,\n                    color: \"var(--nf-dim)\",\n                    overflow: \"hidden\",\n                    textOverflow: \"ellipsis\",\n                    whiteSpace: \"nowrap\",\n                    lineHeight: 1.4,\n                  }}\n                >\n                  {item.body}\n                </div>\n              </motion.div>\n            );\n          })}\n        </AnimatePresence>\n\n        {filtered.length === 0 && (\n          <div\n            style={{\n              padding: \"32px 14px\",\n              textAlign: \"center\",\n              fontSize: 13,\n              color: \"var(--nf-dim)\",\n            }}\n          >\n            No notifications\n          </div>\n        )}\n      </div>\n    </div>\n  );\n}\n\nexport default NotificationsFilter;\n",
      "type": "registry:ui",
      "target": "components/ruixen/notifications-filter.tsx"
    }
  ]
}