{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "settings-toggle-flow",
  "title": "UI Settings Toggle Flow",
  "description": "A two-column settings card: the card and its controls blur-in, then the cursor flips a switch, opens a select, drags a labeled slider, and clicks Save, ending in a saved toast. A pure orchestrator — every channel comes from a composed primitive's transition hook.",
  "dependencies": ["remotion"],
  "registryDependencies": [
    "@remocn/remocn-ui",
    "@remocn/switch",
    "@remocn/select",
    "@remocn/slider",
    "@remocn/button",
    "@remocn/blur-in",
    "@remocn/cursor",
    "@remocn/toast"
  ],
  "files": [
    {
      "path": "registry/remocn-ui/settings-toggle-flow/index.tsx",
      "content": "\"use client\";\n\nimport { Button } from \"@/components/remocn/button\";\nimport { Cursor } from \"@/components/remocn/cursor\";\nimport { Select } from \"@/components/remocn/select\";\nimport { Slider } from \"@/components/remocn/slider\";\nimport { Switch } from \"@/components/remocn/switch\";\nimport { Toast } from \"@/components/remocn/toast\";\nimport { useBlurInTransition } from \"@/components/remocn/use-blur-in-transition\";\nimport { useButtonTransition } from \"@/components/remocn/use-button-transition\";\nimport { useCursorPath } from \"@/components/remocn/use-cursor-path\";\nimport { useSelectItemTransition } from \"@/components/remocn/use-select-item-transition\";\nimport { useSelectTransition } from \"@/components/remocn/use-select-transition\";\nimport { useSliderTransition } from \"@/components/remocn/use-slider-transition\";\nimport { useSwitchTransition } from \"@/components/remocn/use-switch-transition\";\nimport { useToastTransition } from \"@/components/remocn/use-toast-transition\";\nimport { type RemocnTheme, useRemocnTheme } from \"@/lib/remocn-ui\";\n\nconst DEFAULT_ROWS = [\n  { label: \"Notifications\" },\n  { label: \"Theme\" },\n  { label: \"Volume\" },\n];\nconst DEFAULT_SELECT_ITEMS = [\"System\", \"Light\", \"Dark\"];\n\nconst LEFT_X = 320;\nconst RIGHT_X = 700;\nconst COL_W = 300;\n\nconst NOTIF_LABEL_Y = 196;\nconst SWITCH_TOP = 222;\nconst SWITCH_W = 44;\nconst SWITCH_H = 28;\nconst SWITCH_CX = RIGHT_X + SWITCH_W / 2;\nconst SWITCH_CY = SWITCH_TOP + SWITCH_H / 2;\n\nconst THEME_LABEL_Y = 280;\nconst SELECT_W = 260;\nconst TRIGGER_TOP = 320;\nconst TRIGGER_H = 40;\nconst TRIGGER_CX = RIGHT_X + SELECT_W / 2;\nconst TRIGGER_CY = TRIGGER_TOP + TRIGGER_H / 2;\nconst ITEM_CX = TRIGGER_CX;\nconst PANEL_TOP = TRIGGER_TOP + TRIGGER_H + 6;\nconst PANEL_PAD = 4;\nconst ITEM_H = 33;\nconst ITEM_GAP = 2;\n\nconst VOL_LABEL_Y = 380;\nconst SLIDER_TOP = 400;\nconst SLIDER_W = 260;\nconst SLIDER_H = 16;\nconst SLIDER_CY = SLIDER_TOP + SLIDER_H / 2;\nconst SLIDER_X0 = RIGHT_X;\nconst THUMB_X_AT_20 = SLIDER_X0 + 0.2 * SLIDER_W;\nconst THUMB_X_AT_80 = SLIDER_X0 + 0.8 * SLIDER_W;\n\nconst SAVE_W = 160;\nconst SAVE_LEFT = RIGHT_X + SELECT_W - SAVE_W;\nconst SAVE_TOP = 544;\nconst SAVE_H = 40;\nconst SAVE_CX = SAVE_LEFT + SAVE_W / 2;\nconst SAVE_CY = SAVE_TOP + SAVE_H / 2;\n\nconst CARD_PAD = 44;\nconst CARD_LEFT = LEFT_X - CARD_PAD;\nconst CARD_TOP = NOTIF_LABEL_Y - CARD_PAD;\nconst CARD_W = RIGHT_X + SELECT_W + CARD_PAD - CARD_LEFT;\nconst CARD_H = SAVE_TOP + SAVE_H + CARD_PAD - CARD_TOP;\n\nconst DEMO = 44;\n\nexport interface SettingsToggleFlowProps {\n  title?: string;\n  description?: string;\n  rows?: { label: string }[];\n  selectItems?: string[];\n  saveLabel?: string;\n  toastTitle?: string;\n  theme?: Partial<RemocnTheme>;\n}\n\nexport function SettingsToggleFlow({\n  title = \"Notification settings\",\n  description = \"Manage how you receive alerts, set your theme, and tune the volume.\",\n  rows = DEFAULT_ROWS,\n  selectItems = DEFAULT_SELECT_ITEMS,\n  saveLabel = \"Save settings\",\n  toastTitle = \"Settings saved\",\n  theme,\n}: SettingsToggleFlowProps) {\n  const resolved = useRemocnTheme(theme);\n  const opts = { theme };\n\n  const lastItem = selectItems.length - 1;\n  const ITEM_CY =\n    PANEL_TOP + PANEL_PAD + lastItem * (ITEM_H + ITEM_GAP) + ITEM_H / 2;\n\n  const cardEnter = useBlurInTransition(\n    [{ at: 0, state: \"revealed\", duration: 18 }],\n    { distance: 0 },\n  );\n  const enterHeader = useBlurInTransition([\n    { at: 18, state: \"revealed\", duration: 16 },\n  ]);\n  const enterSwitch = useBlurInTransition([\n    { at: 24, state: \"revealed\", duration: 16 },\n  ]);\n  const enterTheme = useBlurInTransition([\n    { at: 30, state: \"revealed\", duration: 16 },\n  ]);\n  const enterVolume = useBlurInTransition([\n    { at: 36, state: \"revealed\", duration: 16 },\n  ]);\n  const enterSave = useBlurInTransition([\n    { at: 42, state: \"revealed\", duration: 16 },\n  ]);\n\n  const reveal = (e: {\n    opacity: number;\n    blur: number;\n    translateX: number;\n    translateY: number;\n  }) => ({\n    opacity: e.opacity,\n    filter: e.blur > 0 ? `blur(${e.blur}px)` : \"none\",\n    transform: `translate(${e.translateX}px, ${e.translateY}px)`,\n  });\n\n  const cursorStyle = useCursorPath([\n    { at: 0, x: 220, y: 130 },\n    { at: 24 + DEMO, x: SWITCH_CX, y: SWITCH_CY, duration: 20 },\n    { at: 24 + DEMO, x: SWITCH_CX, y: SWITCH_CY, click: true, duration: 0 },\n    { at: 55 + DEMO, x: TRIGGER_CX, y: TRIGGER_CY, duration: 22 },\n    { at: 55 + DEMO, x: TRIGGER_CX, y: TRIGGER_CY, click: true, duration: 0 },\n    { at: 80 + DEMO, x: ITEM_CX, y: ITEM_CY, duration: 18 },\n    { at: 80 + DEMO, x: ITEM_CX, y: ITEM_CY, click: true, duration: 0 },\n    { at: 105 + DEMO, x: THUMB_X_AT_20, y: SLIDER_CY, duration: 18 },\n    {\n      at: 105 + DEMO,\n      x: THUMB_X_AT_20,\n      y: SLIDER_CY,\n      press: true,\n      duration: 0,\n    },\n    {\n      at: 150 + DEMO,\n      x: THUMB_X_AT_80,\n      y: SLIDER_CY,\n      press: true,\n      duration: 45,\n    },\n    { at: 158 + DEMO, x: THUMB_X_AT_80, y: SLIDER_CY, duration: 0 },\n    { at: 180 + DEMO, x: SAVE_CX, y: SAVE_CY, duration: 18 },\n    { at: 180 + DEMO, x: SAVE_CX, y: SAVE_CY, click: true, duration: 0 },\n  ]);\n\n  const switchStyle = useSwitchTransition(\n    [{ at: 24 + DEMO, state: \"checked\", duration: 12 }],\n    opts,\n  );\n\n  const panelStyle = useSelectTransition(\n    [\n      { at: 55 + DEMO, state: \"opened\", duration: 14 },\n      { at: 90 + DEMO, state: \"closed\", duration: 12 },\n    ],\n    opts,\n  );\n\n  const triggerStyle = useButtonTransition(\n    [\n      { at: 45 + DEMO, state: \"hover\", duration: 8 },\n      { at: 55 + DEMO, state: \"press\", duration: 8 },\n    ],\n    { variant: \"outline\", ...opts },\n  );\n\n  const itemStyle = useSelectItemTransition(\n    [\n      { at: 68 + DEMO, state: \"hover\", duration: 8 },\n      { at: 78 + DEMO, state: \"press\", duration: 6 },\n      { at: 80 + DEMO, state: \"selected\", duration: 10 },\n    ],\n    opts,\n  );\n\n  const sliderStyle = useSliderTransition([\n    { at: 0, value: 20, thumbState: \"idle\" },\n    { at: 105 + DEMO, thumbState: \"press\", duration: 6 },\n    { at: 105 + DEMO, value: 20 },\n    { at: 150 + DEMO, value: 80, duration: 45, easing: \"inOut\" },\n    { at: 158 + DEMO, thumbState: \"idle\", duration: 8 },\n  ]);\n\n  const saveStyle = useButtonTransition(\n    [\n      { at: 172 + DEMO, state: \"hover\", duration: 8 },\n      { at: 180 + DEMO, state: \"press\", duration: 6 },\n      { at: 188 + DEMO, state: \"success\", duration: 14 },\n    ],\n    opts,\n  );\n\n  const toastStyle = useToastTransition(\n    [\n      { at: 196 + DEMO, state: \"visible\", duration: 12 },\n      { at: 256 + DEMO, state: \"hidden\", duration: 12 },\n    ],\n    {},\n  );\n\n  const rowLabelStyle = {\n    fontSize: 14,\n    fontWeight: 500,\n    letterSpacing: \"-0.01em\",\n    color: resolved.foreground,\n  } as const;\n\n  return (\n    <div\n      style={{\n        position: \"relative\",\n        width: \"100%\",\n        height: \"100%\",\n        background: \"transparent\",\n        fontFamily:\n          \"var(--font-geist-sans), -apple-system, BlinkMacSystemFont, sans-serif\",\n      }}\n    >\n      {}\n      <div\n        style={{\n          position: \"absolute\",\n          left: CARD_LEFT,\n          top: CARD_TOP,\n          width: CARD_W,\n          height: CARD_H,\n          boxSizing: \"border-box\",\n          background: resolved.background,\n          border: `1px solid ${resolved.border}`,\n          borderRadius: 16,\n          boxShadow:\n            \"0 10px 30px -12px rgba(0,0,0,0.22), 0 2px 8px -3px rgba(0,0,0,0.10)\",\n          opacity: cardEnter.opacity,\n          filter: cardEnter.blur > 0 ? `blur(${cardEnter.blur}px)` : \"none\",\n        }}\n      />\n\n      {}\n      <div\n        style={{\n          position: \"absolute\",\n          left: LEFT_X,\n          top: NOTIF_LABEL_Y,\n          width: COL_W,\n          display: \"flex\",\n          flexDirection: \"column\",\n          gap: 10,\n          ...reveal(enterHeader),\n        }}\n      >\n        <div\n          style={{\n            fontSize: 22,\n            lineHeight: \"28px\",\n            fontWeight: 600,\n            letterSpacing: \"-0.02em\",\n            color: resolved.foreground,\n          }}\n        >\n          {title}\n        </div>\n        <div\n          style={{\n            fontSize: 14,\n            lineHeight: \"22px\",\n            color: resolved.mutedForeground,\n          }}\n        >\n          {description}\n        </div>\n      </div>\n\n      {}\n      <div\n        style={{\n          position: \"absolute\",\n          left: RIGHT_X,\n          top: NOTIF_LABEL_Y,\n          ...rowLabelStyle,\n          ...reveal(enterSwitch),\n        }}\n      >\n        {rows[0]?.label ?? \"Notifications\"}\n      </div>\n      <div\n        style={{\n          position: \"absolute\",\n          left: RIGHT_X,\n          top: SWITCH_TOP,\n          width: SWITCH_W,\n          height: SWITCH_H,\n          ...reveal(enterSwitch),\n        }}\n      >\n        <Switch style={switchStyle} theme={theme} />\n      </div>\n\n      {}\n      <div\n        style={{\n          position: \"absolute\",\n          left: RIGHT_X,\n          top: VOL_LABEL_Y,\n          ...rowLabelStyle,\n          ...reveal(enterVolume),\n        }}\n      >\n        {rows[2]?.label ?? \"Volume\"}\n      </div>\n      <div\n        style={{\n          position: \"absolute\",\n          left: SLIDER_X0,\n          top: SLIDER_TOP,\n          ...reveal(enterVolume),\n        }}\n      >\n        <Slider style={sliderStyle} width={SLIDER_W} theme={theme} />\n      </div>\n\n      {}\n      <div\n        style={{\n          position: \"absolute\",\n          left: RIGHT_X,\n          top: THEME_LABEL_Y,\n          ...rowLabelStyle,\n          ...reveal(enterTheme),\n        }}\n      >\n        {rows[1]?.label ?? \"Theme\"}\n      </div>\n      <div\n        style={{\n          position: \"absolute\",\n          left: RIGHT_X,\n          top: TRIGGER_TOP,\n          width: SELECT_W,\n          height: TRIGGER_H,\n          ...reveal(enterTheme),\n        }}\n      >\n        <Select\n          style={panelStyle}\n          label={selectItems[0] ?? \"System\"}\n          items={selectItems}\n          triggerStyle={triggerStyle}\n          itemStyles={selectItems.map((_, i) =>\n            i === selectItems.length - 1 ? itemStyle : undefined,\n          )}\n          theme={theme}\n        />\n      </div>\n\n      {}\n      <div\n        style={{\n          position: \"absolute\",\n          left: SAVE_LEFT,\n          top: SAVE_TOP,\n          width: SAVE_W,\n          height: SAVE_H,\n          ...reveal(enterSave),\n        }}\n      >\n        <Button label={saveLabel} style={saveStyle} theme={theme} />\n      </div>\n\n      {}\n      <div style={{ position: \"absolute\", right: 24, bottom: 24 }}>\n        <Toast\n          style={toastStyle}\n          title={toastTitle}\n          variant=\"success\"\n          theme={theme}\n        />\n      </div>\n\n      <Cursor style={cursorStyle} variant=\"pointer\" theme={theme} />\n    </div>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/remocn/settings-toggle-flow.tsx"
    }
  ],
  "type": "registry:component"
}