{
  "name": "svelte-ui-button",
  "title": "svelte-ui-button",
  "type": "registry:component",
  "description": "",
  "registryDependencies": [],
  "dependencies": [
    "prosekit@^0.22.0"
  ],
  "files": [
    {
      "path": "registry/src/svelte/ui/button/button.svelte",
      "type": "registry:component",
      "target": "components/editor/ui/button/button.svelte",
      "content": "<script lang=\"ts\">\nimport { TooltipPopup, TooltipPositioner, TooltipRoot, TooltipTrigger } from 'prosekit/svelte/tooltip'\n\ninterface Props {\n  pressed?: boolean\n  disabled?: boolean\n  onClick?: () => void\n  tooltip?: string\n  children?: import('svelte').Snippet\n}\n\nconst props: Props = $props()\nconst pressed = $derived(props.pressed ?? false)\nconst disabled = $derived(props.disabled ?? false)\n</script>\n\n<TooltipRoot>\n  <TooltipTrigger class=\"block\">\n    <button\n      data-state={pressed ? 'on' : 'off'}\n      {disabled}\n      class=\"outline-unset focus-visible:outline-unset flex items-center justify-center rounded-md p-2 font-medium transition focus-visible:ring-2 text-sm focus-visible:ring-gray-900 dark:focus-visible:ring-gray-300 disabled:pointer-events-none min-w-9 min-h-9 text-gray-900 dark:text-gray-50 disabled:text-gray-900/50 dark:disabled:text-gray-50/50 bg-transparent hover:bg-gray-100 dark:hover:bg-gray-800 data-[state=on]:bg-gray-200 dark:data-[state=on]:bg-gray-700\"\n      onclick={props.onClick}\n      onmousedown={(e) => e.preventDefault()}\n    >\n      {@render props.children?.()}\n      {#if props.tooltip}\n        <span class=\"sr-only\">{props.tooltip}</span>\n      {/if}\n    </button>\n  </TooltipTrigger>\n  {#if props.tooltip}\n    <TooltipPositioner class=\"block overflow-visible w-min h-min z-50 ease-out transition-transform duration-100 motion-reduce:transition-none\">\n      <TooltipPopup class=\"flex box-border origin-(--transform-origin) transition-[opacity,scale] transition-discrete motion-reduce:transition-none duration-100 data-[state=closed]:duration-150 data-[state=closed]:opacity-0 starting:opacity-0 data-[state=closed]:scale-95 starting:scale-95 overflow-hidden rounded-md border border-solid bg-gray-900 dark:bg-gray-50 px-3 py-1.5 text-xs text-gray-50 dark:text-gray-900 shadow-xs text-nowrap\">\n        {props.tooltip}\n      </TooltipPopup>\n    </TooltipPositioner>\n  {/if}\n</TooltipRoot>\n"
    },
    {
      "path": "registry/src/svelte/ui/button/index.ts",
      "type": "registry:component",
      "target": "components/editor/ui/button/index.ts",
      "content": "export { default as Button } from './button.svelte'\n"
    }
  ],
  "meta": {
    "hasIcons": false,
    "hidden": false,
    "story": "",
    "framework": "svelte",
    "accumulatedFiles": [
      "registry/src/svelte/ui/button/button.svelte",
      "registry/src/svelte/ui/button/index.ts"
    ],
    "internalDependencies": []
  },
  "$schema": "https://ui.shadcn.com/schema/registry-item.json"
}