{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"sandbox","type":"registry:ui","title":"sandbox","description":"The sandbox component allows you to preview and test components in a sandboxed environment.","author":"Hayden Bleasel <hello@haydenbleasel.com>","dependencies":["@codesandbox/sandpack-react"],"devDependencies":[],"registryDependencies":[],"files":[{"type":"registry:ui","path":"index.tsx","content":"\"use client\";\n\nimport type {\n  CodeEditorProps,\n  PreviewProps,\n  SandpackLayoutProps,\n  SandpackProviderProps,\n} from \"@codesandbox/sandpack-react\";\nimport {\n  SandpackCodeEditor,\n  SandpackConsole,\n  SandpackFileExplorer,\n  SandpackLayout,\n  SandpackPreview,\n  SandpackProvider,\n} from \"@codesandbox/sandpack-react\";\nimport type {\n  ButtonHTMLAttributes,\n  ComponentProps,\n  HTMLAttributes,\n  ReactNode,\n} from \"react\";\nimport {\n  createContext,\n  useCallback,\n  useContext,\n  useEffect,\n  useState,\n} from \"react\";\nimport { cn } from \"@/lib/utils\";\n\nexport type SandboxProviderProps = SandpackProviderProps;\n\nexport const SandboxProvider = ({\n  className,\n  ...props\n}: SandpackProviderProps): ReactNode => (\n  <div className={cn(\"size-full\", className)}>\n    <SandpackProvider className=\"!size-full !max-h-none\" {...props} />\n  </div>\n);\n\nexport type SandboxLayoutProps = SandpackLayoutProps;\n\nexport const SandboxLayout = ({\n  className,\n  ...props\n}: SandpackLayoutProps): ReactNode => (\n  <SandpackLayout\n    className={cn(\n      \"!rounded-none !border-none !bg-transparent !h-full\",\n      className\n    )}\n    {...props}\n  />\n);\n\nexport type SandboxTabsContextValue = {\n  selectedTab: string | undefined;\n  setSelectedTab: (value: string) => void;\n};\n\nconst SandboxTabsContext = createContext<SandboxTabsContextValue | undefined>(\n  undefined\n);\n\nconst useSandboxTabsContext = () => {\n  const context = useContext(SandboxTabsContext);\n\n  if (!context) {\n    throw new Error(\n      \"SandboxTabs components must be used within a SandboxTabsProvider\"\n    );\n  }\n\n  return context;\n};\n\nexport type SandboxTabsProps = HTMLAttributes<HTMLDivElement> & {\n  defaultValue?: string;\n  value?: string;\n  onValueChange?: (value: string) => void;\n};\n\nexport const SandboxTabs = ({\n  className,\n  defaultValue,\n  value,\n  onValueChange,\n  ...props\n}: SandboxTabsProps): ReactNode => {\n  const [selectedTab, setSelectedTabState] = useState(value || defaultValue);\n\n  useEffect(() => {\n    if (value !== undefined) {\n      setSelectedTabState(value);\n    }\n  }, [value]);\n\n  const setSelectedTab = useCallback(\n    (newValue: string) => {\n      if (value === undefined) {\n        setSelectedTabState(newValue);\n      }\n      onValueChange?.(newValue);\n    },\n    [value, onValueChange]\n  );\n\n  return (\n    <SandboxTabsContext.Provider value={{ selectedTab, setSelectedTab }}>\n      <div\n        className={cn(\n          \"group relative flex size-full flex-col overflow-hidden rounded-lg border text-sm\",\n          className\n        )}\n        {...props}\n        data-selected={selectedTab}\n      >\n        {props.children}\n      </div>\n    </SandboxTabsContext.Provider>\n  );\n};\n\nexport type SandboxTabsListProps = HTMLAttributes<HTMLDivElement>;\n\nexport const SandboxTabsList = ({\n  className,\n  ...props\n}: SandboxTabsListProps): ReactNode => (\n  <div\n    className={cn(\n      \"inline-flex w-full shrink-0 items-center justify-start border-b bg-secondary p-2 text-muted-foreground\",\n      className\n    )}\n    role=\"tablist\"\n    {...props}\n  />\n);\n\nexport type SandboxTabsTriggerProps = Omit<\n  ButtonHTMLAttributes<HTMLButtonElement>,\n  \"onClick\"\n> & {\n  value: string;\n};\n\nexport const SandboxTabsTrigger = ({\n  className,\n  value,\n  ...props\n}: SandboxTabsTriggerProps): ReactNode => {\n  const { selectedTab, setSelectedTab } = useSandboxTabsContext();\n\n  const handleClick = useCallback(() => {\n    setSelectedTab(value);\n  }, [setSelectedTab, value]);\n\n  return (\n    <button\n      aria-selected={selectedTab === value}\n      className={cn(\n        \"inline-flex items-center justify-center gap-1.5 whitespace-nowrap rounded-md px-3 py-1 font-medium text-sm ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow\",\n        className\n      )}\n      data-state={selectedTab === value ? \"active\" : \"inactive\"}\n      onClick={handleClick}\n      role=\"tab\"\n      {...props}\n    />\n  );\n};\n\nexport type SandboxTabsContentProps = HTMLAttributes<HTMLDivElement> & {\n  value: string;\n};\n\nexport const SandboxTabsContent = ({\n  className,\n  value,\n  ...props\n}: SandboxTabsContentProps): ReactNode => {\n  const { selectedTab } = useSandboxTabsContext();\n\n  return (\n    <div\n      aria-hidden={selectedTab !== value}\n      className={cn(\n        \"flex-1 overflow-y-auto ring-offset-background transition-opacity duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2\",\n        selectedTab === value\n          ? \"h-auto w-auto opacity-100\"\n          : \"pointer-events-none absolute h-0 w-0 opacity-0\",\n        className\n      )}\n      data-state={selectedTab === value ? \"active\" : \"inactive\"}\n      role=\"tabpanel\"\n      {...props}\n    />\n  );\n};\n\nexport type SandboxCodeEditorProps = CodeEditorProps;\n\nexport const SandboxCodeEditor = ({\n  showTabs = false,\n  ...props\n}: SandboxCodeEditorProps): ReactNode => (\n  <SandpackCodeEditor showTabs={showTabs} {...props} />\n);\n\nexport type SandboxConsoleProps = Parameters<typeof SandpackConsole>[0];\n\nexport const SandboxConsole = ({\n  className,\n  ...props\n}: SandboxConsoleProps): ReactNode => (\n  <SandpackConsole className={cn(\"h-full\", className)} {...props} />\n);\n\nexport type SandboxPreviewProps = PreviewProps & {\n  className?: string;\n};\n\nexport const SandboxPreview = ({\n  className,\n  showOpenInCodeSandbox = false,\n  ...props\n}: SandboxPreviewProps): ReactNode => (\n  <SandpackPreview\n    className={cn(\"h-full\", className)}\n    showOpenInCodeSandbox={showOpenInCodeSandbox}\n    {...props}\n  />\n);\n\nexport type SandboxFileExplorerProps = ComponentProps<\n  typeof SandpackFileExplorer\n>;\n\nexport const SandboxFileExplorer = ({\n  autoHiddenFiles = true,\n  className,\n  ...props\n}: SandboxFileExplorerProps): ReactNode => (\n  <SandpackFileExplorer\n    autoHiddenFiles={autoHiddenFiles}\n    className={cn(\"h-full\", className)}\n    {...props}\n  />\n);\n","target":"components/kibo-ui/sandbox/index.tsx"}],"css":{}}