{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "type-writer",
  "title": "Type Writer",
  "description": "A Typewriter Text component with Interval-based Character Rendering.",
  "dependencies": [
    "mobx",
    "mobx-react",
    "mobx-react-helper",
    "web-utility"
  ],
  "files": [
    {
      "path": "registry/new-york/blocks/type-writer/index.tsx",
      "content": "\"use client\";\n\nimport { observable } from \"mobx\";\nimport { observer } from \"mobx-react\";\nimport { ObservedComponent, reaction } from \"mobx-react-helper\";\nimport { createRef, HTMLAttributes } from \"react\";\nimport { sleep, watchVisible } from \"web-utility\";\n\nexport interface TypeWriterProps extends HTMLAttributes<HTMLSpanElement> {\n  children: string;\n  intervalSeconds?: number;\n}\n\n@observer\nexport class TypeWriter extends ObservedComponent<TypeWriterProps> {\n  static readonly displayName = \"TypeWriter\";\n\n  @observable\n  accessor shownIndex = 0;\n\n  #bootVersion = 0;\n\n  #box = createRef<HTMLSpanElement>();\n\n  componentDidMount() {\n    super.componentDidMount();\n\n    if (this.#box.current)\n      watchVisible(this.#box.current, this.boot.bind(this));\n  }\n\n  componentWillUnmount() {\n    super.componentWillUnmount();\n    this.#bootVersion++;\n  }\n\n  @reaction(\n    ({ observedProps }) =>\n      observedProps.children + observedProps.intervalSeconds,\n  )\n  async boot() {\n    const taskVersion = ++this.#bootVersion;\n    const { children, intervalSeconds = 0.1 } = this.props;\n\n    this.shownIndex = 0;\n\n    if (!children) return;\n\n    for (let index = 1; index <= children.length; index++) {\n      await sleep(intervalSeconds);\n\n      if (taskVersion !== this.#bootVersion) return;\n\n      this.shownIndex = index;\n    }\n  }\n\n  render() {\n    const { children, ...props } = this.props;\n\n    return (\n      <span ref={this.#box} {...props}>\n        {children.slice(0, this.shownIndex)}\n      </span>\n    );\n  }\n}\n",
      "type": "registry:component",
      "target": "@components/ui/mobx-restful-shadcn/type-writer/index.tsx"
    }
  ],
  "type": "registry:component"
}